只针对李而忽略孩子

Question

这是我的嵌套li标签的html代码

<ul class="nav">
<li class="menu">
    <ul class="sub_nav">
        <li class="sub_menu"></li>
        <li class="sub_menu"></li>
    </ul>
</li>
<li class="menu">
    <ul class="sub_nav">
        <li class="sub_menu"></li>
        <li class="sub_menu"></li>
    </ul>
</li>
</ul>

如何仅选择带有类菜单的li标签并取消选择具有类sub_menu

的子项

 jQuery("li.menu :not('li.sub_menu')").click(function(
            jQuery(this).toggleClass("active")
 })

Answer 1

您可以执行以下操作，检查单击的项目是否为选择器元素。如果不是，则返回false，从而阻止事件冒泡到父级。

$("li.menu").click(function(event) {
  if (event.target !== this) {
    return false;
  }
  $(this).toggleClass("active");
});

li.menu.active {
  color: red;
}

li.sub_menu {
  color: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li class="menu">
    menu
    <ul class="sub_nav">
      <li class="sub_menu">submenu</li>
      <li class="sub_menu">submenu</li>
    </ul>
  </li>
  <li class="menu">
    menu
    <ul class="sub_nav">
      <li class="sub_menu">submenu</li>
      <li class="sub_menu">submenu</li>
    </ul>
  </li>
</ul>

Answer 2

一个简单的解决方案：

$(".nav > li").click(function(){
    jQuery(this).toggleClass("active")
});

您仍然会选择其他li个节点，但只能作为父li的子节点，我不会想到这些节点有问题。

Answer 3

我认为您必须通过CSS为子菜单定义默认颜色，例如：

.menu, .sub_nav, .active .sub_nav{
  color: #555;
}

然后仅将活动类应用于.nav的直接子项。

那，并且将来自@ H77的JS代码（将click事件定位到顶级li）的组合应该可以解决问题。

见下面的演示：

＆＃13;

＆＃13;

$(function() {
  $(".nav > li.menu").click(function() {
    if (event.target !== this) {
      return false;
    }

    $(this).toggleClass("active");
  });
});

＆＃13;

li.active.menu {
  color: red;
}

.menu,
.sub_nav,
.active .sub_nav {
  color: #555;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li class="menu">
    menu
    <ul class="sub_nav">
      <li class="sub_menu">submenu</li>
      <li class="sub_menu">submenu</li>
    </ul>
  </li>
  <li class="menu">
    menu
    <ul class="sub_nav">
      <li class="sub_menu">submenu</li>
      <li class="sub_menu">submenu</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;