使用 slideToggle(） 使容器内的链接工作

Make Link Inside A container With slideToggle() work

本文关键字：链接 工作 slideToggle 使用      更新时间：2023-09-26

我有这个标记：

<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 操作。 有什么想法吗？

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

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

工作样品

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

只需添加

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

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

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/

相关文章：