4

我有一个顶部导航栏，它的一些项目触发下拉/下滑。

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

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

这是我拥有的基本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');
});

这是一个演示

任何帮助是极大的赞赏。

谢谢。

4

4 回答 4

7

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

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

http://jsfiddle.net/DEfK9/

于 2012-11-12T20:18:19.727 回答
1

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

$('.dropdown .noclick').click(function(e) {
    // Do stuff.
});
于 2012-11-12T20:20:52.430 回答
0

您可以使用以下代码段简单地将 slideToggle() 更改为 slideDown()：

http://jsfiddle.net/yrzRu/

if ($(this).not('.selected')) {
        $('ul:first', this).stop(true, true).slideDown('fast');
        $(this).addClass('selected');
    }
于 2012-11-12T20:24:51.260 回答
0

干得好！

小提琴

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

});
于 2012-11-12T20:40:04.333 回答