JQuery如何选择父母而不是孩子答案

【问题标题】：JQuery how to select parent but not childrenJQuery如何选择父母而不是孩子
【发布时间】：2015-05-01 18:38:57
【问题描述】：

很抱歉，这可能是一个简单的问题，但我还没有找到一种方法来完成这项工作。我是 JQuery 的新手，我有一些嵌套列表，我试图将点击事件添加到父列表中，这将滑动切换子列表，我已经开始工作了，但是如果我点击任何子列表，它也会触发slideToggle。当只选择父类而不选择任何子类时，有没有办法指定选择器来执行操作？

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

$(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>

【问题讨论】：

如果您有几分钟的时间，可以更轻松地为您提供 Snippet。
可以使用被点击元素的parent()，根据父属性阻止脚本继续执行。
@SimonArnold 我已经为这个例子添加了代码 sn-p
@Mike 看来问题在于您的选择器针对多个元素。

标签： jquery jquery-selectors

【解决方案1】：

$(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>

【讨论】：

完美，谢谢。这对我上面的例子很有效。出于某种原因，它在我的实际项目中不起作用，但我应该能够应用它来解决它。
很高兴它对您有所帮助。如果您的实际项目仍然受阻，请不要犹豫。我们会帮忙的！
原来我正在处理两个问题。第一个，你好心帮忙。其次是我正在使用动态添加的元素。找到了一些关于事件委托的答案，我很高兴。再次感谢！

【解决方案2】：

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

解决方案是丢弃ulClass2上的任何点击事件：

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

【讨论】：

我添加了一个代码sn-p来演示这个例子。我还删除了选择器的“非”部分，它的行为方式相同（单击 liClass2 下的跨度仍会激活滑动切换，因此该跨度被隐藏）。
这是一个很好的解释，谢谢！现在我只需要让它与我的真实项目一起工作:)