jquery - 在父级单击时切换类并排除子级单击

Question

我可以仅在单击父级而不是子级时切换类(class)吗？

该类只能在单击顶级 li 时切换。

代码笔:https://codepen.io/flinch85/pen/zXdJav

 $( document ).ready(function() { 

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

  });

Answer 1

使用is()检查作为.menu-item-has-children元素的直接子元素的目标元素a标签方法(或防止事件冒泡)。或者将事件处理程序绑定(bind)到直接子标记 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>