通过点击父级切换班级，不点击子级点击

Question

我只能在单击父级li而不单击子级时切换班级吗？

仅在单击顶级li时，班级才应切换。

Codepen：https://codepen.io/flinch85/pen/zXdJav

 $( document ).ready(function() { 

  $('.menu-item-has-children').click(function(){
  $(this).toggleClass('sub-show');
});

  });

Answer 1

使用is()方法检查目标元素a标签，它是.menu-item-has-children元素的直接子元素（或防止事件冒泡）。或者将事件处理程序绑定到直接子标记a，这样当您在嵌套列表中单击时它将不会触发。

$(document).ready(function() {
  $(".menu-item-has-children").click(function(e) {
    if ($(e.target).is(".menu-item-has-children > a"))
      $(this).toggleClass("sub-show");
  });
});

$(document).ready(function() {
  $(".menu-item-has-children").click(function(e) {
    if ($(e.target).is(".menu-item-has-children > a"))
      $(this).toggleClass("sub-show");
  });
});

.sub-show {
  color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a></li>

  <li class="menu-item-has-children"><a>Services</a>

    <ul class="sub-menu">
      <li><a href="#">Item</a></li>
    </ul>

  </li>

</ul>

Answer 2

对于您的情况，

您只需更改选择器即可：

   $('.menu-item-has-children > a').click(function(){
      $(this).toggleClass('sub-show');
    });

$(document).ready(function() {
  $('.menu-item-has-children > a').click(function() {
    $(this).toggleClass('sub-show');
  });
});

.sub-show {
  color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a></li>

  <li class="menu-item-has-children"><a>Services</a>

    <ul class="sub-menu">
      <li><a href="#">Item</a></li>
    </ul>

  </li>

</ul>