javascript - 使用 slideToggle() 使容器内的链接工作

Question

我有这个标记：

<ul><li id="link-notifications">
  <ul class="list-notifications" style="display:none">
    <li><a href="/link/to">Item 1</a></li>
  </ul>
</li>
</ul>

使用这个 Jquery：

$('#link-notifications').click(function(e){
   e.preventDefault();
   e.stopPropagation();           
   $(this).find('.list-notifications').slideToggle('medium');       
});

但是每当列表向下滑动时，我单击链接，列表就会向上滑动。我听说 stopPropagation 有效，所以我添加了它，但它不起作用。我什至尝试将它添加到 slideToggle 回调中，但它只是停止了 slideUp 操作。有任何想法吗？

Answer 1

click仅将事件绑定到#link-notifications转义其内部内容的 ans。

$('#link-notifications, :not("#link-notifications > *")').click(function(e){
   e.stopPropagation();           
   $(this).find('.list-notifications').slideToggle('medium');       
});

工作样本

Answer 2

您不需要 e.stopPropagation()在该事件中，而是在单击链接时。

只需添加

$('.list-notifications').click(function(e){
    e.stopPropagation();
});

http://jsfiddle.net/N6pYU/1/

Answer 3

HTML

<ul>
    <li id="link-notifications">
    <a href="#">link-notifications</a>
        <ul class="list-notifications">
            <li><a href="#">Item 1</a></li>
        </ul>
    </li>
</ul>​

jQuery

$('#link-notifications>a').click(function(event){
   $(this).siblings('ul.list-notifications').slideToggle('medium');      
});​

我没有将事件附加到我想要滑动的父级，而是一个兄弟级。这可以防止奇怪的事件冒泡。

小提琴：http: //jsfiddle.net/iambriansreed/59e3F/