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并转义其内部内容。

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

<强> Working sample

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/

使用slideToggle（）工作在容器内部建立链接

3 个答案: