2

Помогите исправить jQuery, не могу разобраться.

Сейчас все работает отлично, кроме одного момента. Если я нажимаю на li.menu-item-has-children у меня раскрывается меню и после повторного клика - скрывается. Нужно сделать чтоб по doubleclick я смог перейти по ссылке указанной в li.menu-item-has-children.

То есть по клику, скрываем/раскрываем, по двойному клику переходим по ссылке. Дочерние элементы должны работать по клику.

Вот сам код

jQuery(function() {
    jQuery('#menu-katalog > li').click(function(e) {
        e.preventDefault();
        var $el = $('ul',this);
        jQuery('#menu-katalog > li > ul').not($el).slideUp();
        $el.stop(true, true).slideToggle(400);
    });
    jQuery('#menu-katalog > li > ul > li').click(function(e) {
        e.stopImmediatePropagation();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-katalog" class="">
    <li class="menu-item menu-item-has-children"><a href="#">item</a>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
        </ul>
    </li>
    <li class="menu-item current-menu-item menu-item-has-children"><a href="#">item</a>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">item</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-has-children"><a href="#">item</a>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-has-children"><a href="#">item</a>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-has-children"><a href="#">item</a>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-has-children"><a href="#">item</a>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
        </ul>
    </li>
</ul>

1 ответ 1

3

(function($) {
  $(function() {
    var delay = 250
      , clicks = 0
      , timer = null;
    $('#menu-katalog > li').click(function(e) {
      e.preventDefault();
      clicks++;
      if (1 === clicks) {
        var self = this;
        timer = setTimeout(function() {
          clicks = 0;
          var $el = $('ul', self);
          $('#menu-katalog > li > ul').not($el).slideUp();
          $el.stop(true, true).slideToggle(400);
        }, delay);
      }
      else {
        clearTimeout(timer);
        clicks = 0;
        var link = $('> a', this)
          , href = link.attr('href')
          , target = link.attr('target');
        target ? window.open(href, target) : window.location = href;
      }
    });
    $('#menu-katalog > li > ul > li').click(function(e) {
      e.stopImmediatePropagation();
    });
  });
})(jQuery);
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<ul id="menu-katalog">
  <li class="menu-item menu-item-has-children"><a href="/">item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
    </ul>
  </li>
  <li class="menu-item current-menu-item menu-item-has-children"><a href="/">item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="/">item</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children"><a href="/">item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children"><a href="/">item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children"><a href="/">item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children"><a href="/">item</a>
    <ul class="sub-menu">
      <li class="menu-item"><a href="/">item</a></li>
      <li class="menu-item"><a href="/">item</a></li>
    </ul>
  </li>
</ul>

1
  • То что нужно, спасибо тебе, великий человек :) 20 апр 2017 в 16:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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