1

Здравствуйте, есть меню реализованное на JS. Работает оно при наведении с задержкой. Однако сейчас появилась необходимость переписать немного меню так, чтоб подпункты открывались по нажатию (клику). Сам код JS выглядит так:

$('.menu li').mouseenter(function(){
    timer = setTimeout(function() {
                $('div.subs div.dl').slideDown(400);
}, 750);
}).mouseleave(function(){
             clearTimeout(timer);
            $('div.subs div.dl').slideUp(50);
});
});

отрисовывается меню следующим образом:

<div class="menuholder">
<ul class="menu slide">
  <?php foreach ($categories as $category) { ?>
  <li><a href="<?php echo $category['href']; ?>" class="orange"><h2><?php echo $category['name']; ?></h2></a>
<?php if ($category['children']) { ?>
  <?php for ($i = 0; $i < count($category['children']);) { ?>
  <div class="subs">
    <div class="dl effect6">
        <?php for ($i = 0; $i < count($category['children']); $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <div class="item">
            <div>
              <a href="<?php echo $category['children'][$i]['href']; ?>"><img alt="<?php echo $category['children'][$i]['name']; ?>" src="<?php echo $category['children'][$i]['image']?>"></a>
            </div>
            <div class="link">
              <a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a>
            </div>
          </div>
          <?php } ?>
      <?php } ?>
    </div>
  </div>
  <?php } ?>
    <?php } ?>
  <?php } ?>
  </li>
  </ul>
</div>
2
  • 8
    Танки в бой! : ) <?php } ?> <?php } ?> <?php } ?>
    – Sergiks
    26 мар 2013 в 8:54
  • А можно код меню конечный, а не кусок шаблона? 26 мар 2013 в 9:56

2 ответа 2

1

Можно сделать так как написал georg, только скройте первоначально подменю(иначе будет работать наоборот), т.е.:

css:

div.subs div.dl{
    display:none;
}

jquery:

$('.menu li').on('click', function(){    
    $('div.subs div.dl').toggle("slow");
});

Рабочий пример:

$('.menu li').on('click', function() {
  $('div.subs div.dl').toggle("slow");
});
div.subs div.dl {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
  <li>test 4</li>
</ul>
<div class="subs">
  <div class="dl">sdcsdcsdcdcsdcsdd</div>
</div>

0

Здравствуйте попробуйте так

$('.menu li').on('click', function(){    
    $('div.subs div.dl').toggle("slow");
});

можете посмотреть рабочий пример здесь jsfiddle.net/wnU9K/

1
  • Закрытие выпадающего списка...
    – Qwertiy
    3 июл 2015 в 14:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.