Question

我在代码中定位正确的li时遇到了一些麻烦。我有一个像bellow

这样的无序列表

<li class="hassub"><span>Affected Areas</span>
            <ul class="sub1">
              <li><a href="#">Tacloban</a></li>
              <li><a href="#">Guiuan</a></li>
              <li><a href="#">Ormoc</a></li>
              <li><a href="#">Roxas</a></li>
            </ul>
</li>

和jquery：

$(document).ready(function(){
  $(".hassub").click(function(){
    $(".sub1").slideToggle();
 });
});

现在我的问题是，即使用户点击<li> <ul> slideToggle()功能上的嵌套<li>之一，你能告诉我如何将功能限制为有效仅在父{{1}}班上？

Answer 1

您只需要在事件回调中检查事件类target和stopPropagation：

$(document).ready(function(){
  $(".hassub").click(function(ev){
    ev.stopPropagation();
    if ( $(ev.target).hasClass('hassub') || $(ev.target).parent('.hassub').length ) {
      // @Jack is right that you should keep the context
      $(".sub1", this).slideToggle();
    }
  });
});

FIDDLE

Answer 2

如果你想要的只是最高级别li来管理点击，那么简单的方法是将广告定位在顶部。假设span设置为填充li

$('.hassub > span').click(function(){
    $(this).parent().find(".sub1").slideToggle();
})

这样点击潜艇就不会被注册

的 DEMO

如何排除DOM选择</li> </ul>上的嵌套<ul>和<li>

2 个答案: