jQuery:单击其子级时，停止下拉菜单的折叠 [英] jQuery: Stop dropdown menu from collapsing when clicking on its children

问题描述

我有一个顶部导航栏，它的某些项目会触发下拉菜单/幻灯片.

I have a top nav bar and some of its items trigger dropdowns/slide-downs.

我的问题是，每当我单击某项或下拉菜单中的任何区域时，下拉菜单都会崩溃.

My problem is that whenever I click an item, or actually any area within the dropdown, the dropdown collapses.

我需要帮助的事情是弄清楚如何避免单击子元素时(或在下拉区域内的任何位置，因为我想解决下拉菜单中的意外点击而导致折叠)不会折叠下拉菜单点击子元素).

What I need help with is figuring out how to avoid collapsing the dropdown when a child element is clicked (or well, anywhere within the dropdown area since I'd like to account for accidental clicks inside the dropdown but that are not actually clicks on a child element).

这是我拥有的基本 HTML 结构:

Here's the basic HTML structure I have:

<ul class="dropdown">
 <li><a href="#" class="noclick nojs">Select your Topic</a>
  <ul class="nojs" >
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
 </li>
</ul>

我的JavaScript:

My JavaScript:

$('.dropdown li').click(function() {
  //Hide all other drop downs that are visible, and remove the class 'selected'
  $(this).siblings('.selected').removeClass('selected').find('ul:visible').slideUp('fast');

  //Show/Hide dropdowns
  $(this).toggleClass('selected');
  $('ul:first', this).stop(true, true).slideToggle('fast');
});

这是 演示

Here's a DEMO

非常感谢您的帮助.

谢谢.

推荐答案

在这些上停止 event.stopPropagation()子元素，这样事件就不会冒充

stop event.stopPropagation() on those children elements so the event doesn't bubble up to the li

$('ul.nojs *').click(function(e){
   e.stopPropagation(); 
});​

http://jsfiddle.net/DEfK9/

这篇关于jQuery:单击其子级时，停止下拉菜单的折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！