DropDown ссылки с помощью JQuery .slidetoggle

Question

Я использую следующий код для создания выпадающего меню с помощью .slidetoggle и JQuery:

<ul> 
    <li class="expand"><span>Dropdown</span> 
     <ul class="sub-menu"> 
      <li style="display: none;"><a href="http://google.com">Foo</a></li> 
      <li style="display: none;"><a href="http://google.com">Foo</a></li> 
      <li style="display: none;"><a href="http://google.com">Foo</a></li> 
     </ul> 
    </li> 
</ul> 

Он отлично работает и нажав li.expand показывает/скрывает ребенка Ли.

Проблема заключается в том, что при нажатии ссылки (например, google.com) в большинстве браузеров меню сначала переключает ul.sub-меню вверх до активации ссылки.

Как отключить меню при переходе по ссылке при нажатии ссылки?

Для уточнения приведенный выше код работает в соответствии с требованиями Safari.

JSFiddle пример, если это необходимо: https://jsfiddle.net/fcs5n8o6/3/

Answer 1

Добавить это:

$('.sub-menu').find('a').click(function(event){ 
    event.stopPropagation();       
}); 

По event.stopPropagation method щелкнул ссылки не уведомит Lī элементы относительно кликов (они делают это сейчас), и нажмите кнопку обработчик для литий не будет Огонь.

Обновлено jsfiddle

Существует еще лучше и лаконичное решение:

<ul> 
    <li class="expand"><span>Dropdown</span> 
     <ul class="sub-menu" style="display: none;"> 
      <li><a href="http://google.com">Foo</a></li> 
      <li><a href="http://google.com">Foo</a></li> 
      <li><a href="http://google.com">Foo</a></li> 
     </ul> 
    </li> 
</ul> 

<script> 
    $(".expand").click(function() { 
     $(".sub-menu").slideToggle("slow"); 
     $('.sub-menu').find('li').click(function(event){ 
      event.stopPropagation();       
     }); 
    }); 
</script> 

new jsfiddle

Я редактировал JQuery селекторов, они были немного слишком обильными и не очень эффективно.

Как для вашего сайта: найти файл custom.js вер = 1 строка 405:

$(".leftnav ul li.removelink.driver").click(function() { 
    event.stopPropagation(); 
    $(".leftnav ul li.removelink.driver li").slideToggle("slow"); 
}); 

изменения для этого:

$(".leftnav ul li.removelink.driver").click(function() { 

     $(".leftnav ul li.removelink.driver li").slideToggle("slow") 
     .click(function(event){event.stopPropagation();}); 

    }); 

Answer 2

Я думаю, что вам нужно event.stopPropagation();

https://jsfiddle.net/zer00ne/yoggar2z/1/