JQuery 如何 select parent 而不是 children

Question

抱歉，这可能是一个简单的问题，但我还没有找到解决这个问题的方法。我是 JQuery 的新手，我有一些嵌套列表，我正在尝试将点击事件添加到 parent 列表，这将滑动切换 children 列表，我'我已经开始工作了，但是如果我单击任何 children 列表，它也会触发 slideToggle。有没有一种方法可以指定选择器在仅选择 parent class 而不是任何 children?

时执行操作

这是我正在尝试做的事情的简化版本：

$(document).ready(function() {
   $(".liClass1").on("click", function(event){
        event.stopPropagation();
        $(this).find(".ulClass2").slideToggle();
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <form>
    <ul class="ulClass1">
      <li class="liClass1">
        <span>liClass1</span>
        <ul class="ulClass2">
          <li class="liClass2">
            <span>liClass2</span>
          </li>
        </ul>
      </li>
    </ul>
  </form>
</body>
</html>

Answer 1

您在 liClass1 上添加了点击处理程序。当您单击 ulClass2 元素时，它会触发相同的处理程序，因为它嵌套在 liClass1 中，所以事件将向上传播！

解决方案是丢弃 ulClass2 上的所有点击事件：

$('.ulClass2').on('click', function(evt) { evt.stopPropagation(); })

Answer 2

$(document).ready(function() {
   $(".liClass1").on("click", function(event){
        $(this).children("ul").slideToggle();
   });

   $(".liClass2").on("click", function(event) {
        event.stopPropagation();
   });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <form>
    <ul class="ulClass1">
      <li class="liClass1">
        <span>liClass1</span>
        <ul class="ulClass2">
          <li class="liClass2">
            <span>liClass2</span>
          </li>
        </ul>
      </li>
    </ul>
  </form>
</body>
</html>

JQuery 如何 select parent 而不是 children

JQuery how to select parent but not children

jquery

jquery-selectors