Question

我有一个顶部导航栏，其中一些项目会触发下拉/下拉。

我的问题是每当我点击一个项目，或者实际上下拉列表中的任何区域时，下拉列表就会崩溃。

我需要帮助的是确定如何在点击子元素时（或者在下拉区域内的任何位置）避免折叠下拉列表，因为我想考虑下拉列表中的意外点击但实际上并不是点击子元素。）

以下是我的基本 HTML 结构：

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

$('.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');
});

这是 DEMO

非常感谢任何帮助。

感谢。

Answer 1

在这些子元素上停止event.stopPropagation()，以便事件不会冒泡到li

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

http://jsfiddle.net/DEfK9/

Answer 2

DEMO - 将.click()事件附加到<a>标记而不是<li>标记。

$('.dropdown .noclick').click(function(e) {
    // Do stuff.
});

Answer 3

您可以使用下面的代码段将slideToggle（）更改为slideDown（）：

http://jsfiddle.net/yrzRu/

if ($(this).not('.selected')) {
        $('ul:first', this).stop(true, true).slideDown('fast');
        $(this).addClass('selected');
    }

Answer 4

你走了！

FIDDLE

$('.dropdown').children('li').click(function() {

    //Show clicked dropdown and add 'selected' class
    $(this).addClass('selected').find('ul').slideToggle('fast');

    //Hide all other dropdowns and remove 'selected' class
    $('.dropdown').children('li').not(this).removeClass('selected').find('ul').slideUp('fast');

});

jQuery：单击其子项时停止下拉菜单折叠

4 个答案: