Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

感谢您的帮助！

Answer 1

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

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

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

JQuery如何选择父级而不是子级

2 个答案: