Question

我有一个简单的侧边栏导航菜单，嵌套元素设置如下：

<ul>
 <li id="nav-Heading1">Heading 1
   <ul id="nav-Expanded">
   <li>Heading 2
     <ul>
     <li><a href="link1">Link 1</a></li>
     <li><a href="link2">Link 2</a></li>
     <li><a href="link3">Link 3</a></li>
     </ul>
   </li>
   </ul>
 </li>
</ul>

我要做的就是设置一个slideToggle（）设置，这样当点击＃nav-Heading1时，id为＃nav-Expanded的ul会向下或向上滑动。

如果＃nav-Expanded ul可见，那么您应该可以点击链接并转到网站中的正确页面。由于某种原因，slideToggle（）被应用于所有元素，因此当您单击链接时，整个＃nav-Expanded ul将消失。我不明白为什么这样做。这是我的JQuery：

$(document).ready(function () {
    $("#nav-Heading1 ul#nav-Expanded").hide(); //hides the Expanded nav initially 
    $('#nav-Heading1').click(function(e) {
           $("#nav-Heading1 ul#nav-Expanded").slideToggle("fast");
    });
});

更新：这是我的JFiddle http://jsfiddle.net/vPb5V/3/

Answer 1

这种情况正在发生，因为链接上的点击正在冒泡并触发外部列表上的点击事件。

添加：

$('#nav-Heading2 a').click(function(e){e.stopPropagation();})

到你的代码来阻止它。

<强> jsFiddle example

参考：http://api.jquery.com/event.stopPropagation/

Answer 2

由于你的孩子是nav-Heading1的孩子，点击nav-Heading1就可以点击它。

尝试检查切换前点击的ul：

if (!$(e.target).closest('#nav-Heading2').length) $("#nav-Heading1 ul#nav-Heading2").slideToggle("fast");

Answer 3

<强> 1。方法问题是#nav-Heading1内的所有元素都将绑定到该事件。要防止event bubbling使用以下内容：

$(document).ready(function () {
    $("#nav-Heading1 ul#nav-Heading2").hide(); //hides the heading2 nav initially 
    $('#nav-Heading1 > span').click(function(e){
       $("#nav-Heading1 ul#nav-Heading2").slideToggle("fast");
    });
    $("#nav-Heading2 a").click(function(e){
        e.stopPropagation();
    });
});

<强> 2。方法

包装＃nav-Heading1的可点击部分：

<ul id="nav-Heading1">
 <li><span>Heading 1</span>
   <ul id="nav-Heading2">
   <li>Heading 2
     <ul>
     <li><a href="link1">Link 1</a></li>
     <li><a href="link2">Link 2</a></li>
     <li><a href="link3">Link 3</a></li>
     </ul>
   </li>
   </ul>
 </li>
</ul>

现在将事件委托给span：

$(document).ready(function () {
    $("#nav-Heading1 ul#nav-Heading2").hide(); //hides the heading2 nav initially 
    $('#nav-Heading1 > span').click(function(e){
       $("#nav-Heading1 ul#nav-Heading2").slideToggle("fast");
    });
});

如何使slideToggle只在点击的第一个元素上工作？

3 个答案: