jquery - 过滤无序列表中的超链接

Question

我有以下代码快照

<ul id="Boss">

      <li class="A">A-list 
        <ul>
          <li class="B">Blah Blah
            <ul>
              <li><a href="#">Lorem Ipsum</a></li>
              <li><a href="#">Medswer</a></li>
            </ul>
          </li>
          <li class="B">Blah Blah BLah
            <ul>
              <li><a href="#">Brotx</a></li>
              <li><a href="#">The holy</a></li>
              <li><a href="#">Terodvc</a></li>
            </ul>
          </li>

我正在切换节点以像这样展开/折叠

$('#Boss').find('.A, .B, .C').filter(":not(:has(>a))").click(function () {
// code to toggle
return false;
}

但是，我想避免在单击锚点时切换节点。所以我添加了一个过滤器，但它不起作用

$('#Boss').find('.A, .B, .C').filter(":not(:has(>a))").click(..)

我究竟做错了什么？请建议将哪些代码用作过滤器，因为其他东西工作得很好，我不想改变太多

谢谢。

Answer 1

事件冒泡。所以在锚点点击事件中停止传播。即使您提到过滤器，您的锚点上的点击事件仍然会冒泡到在li其父/祖父层次结构上注册的点击事件。因此，您可以采取一种方法来阻止传播。

$('#Boss ul li > a').on('click', function(e){
     e.stopPropagation(); 
     e.preventDefault(); //prevent the default action of anchor required here since it wont go to its parent li which has a return false.
     // or combine them to return false; 
});

或者你可以在点击事件中过滤li它

     if(!$(this).is(e.target)){ 
        //click did not happen on li, possibly on its descendants, do whatever you want.
      }

Answer 2

我想，你想要这样的东西（演示）

HTML：

<ul id="Boss">
    <li class="B">Blah Blah
        <ul>
             <li><a href="#">Lorem Ipsum</a></li>
             <li><a href="#">Medswer</a></li>
        </ul>
    </li>
    <li class="B">Blah Blah BLah
        <ul>
             <li><a href="#">Brotx</a></li>
             <li><a href="#">The holy</a></li>
             <li><a href="#">Terodvc</a></li>
        </ul>
    </li>
</ul>

JS：

$(function(){
    $('#Boss li').on('click', function(e){
        e.stopPropagation();
        $(this).find('ul').slideToggle()
    });
});

Answer 3

您应该停止事件传播。

$("#clickable a").click(function(e) {
   //do something
   e.stopPropagation();
})

请参阅此处了解更多信息。