jQuery вертикальное меню (аккордеон)

354

21 апреля 2017, 18:23

Помогите исправить 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>

Answer 1

(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>