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

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

<强> 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();
})

See here for more info

过滤无序列表中的超链接

3 个答案: