[英]jquery click event on nested elements with same class
I am newbie for jquery. 我是jquery的新手。 I have nested
li
with same name. 我筑巢
li
同名。 And I want to set left position of div
with class open according to clicked li
level. 我想根据单击的
li
级别将div
左位置设置为类打开。 But when I click inside li
it take position of first. 但是,当我在
li
内部单击时,它将排在第一位。
Here is my code 这是我的代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="open"> <ul> <li class="child"> <a href="#">link1</a> <ul> <li class="child"> <a href="#">menu link1</a> </li> </ul> </li> </ul> </div> <script> $(".child").on("click", function() { var l = $(this).parents('ul').length var a = 101 * l; $(".open").css({ "left": "-" + a + "%" }) }) </script>
Thanks in advance 提前致谢
问题是,当您单击内部li时,单击和单击都发生了,您可以在事件内部使用stopPropagation来防止
you have to disable the bubbling 你必须禁用冒泡
$(".child").on("click", function(event) {
event.preventDefault(); // diasble default action
event.stopPropagination(); // disable bubbling to parent event
var l = $(this).parents('ul').length
var a = 101*l;
$(".open").css({
"left": "-" + a + "%"
})
})
not tested 未经测试
You can stopt the propagation with event.stopPropagation();
您可以使用
event.stopPropagation();
传播event.stopPropagation();
. 。 I added a
console.log()
so that you see what is clicked. 我添加了
console.log()
以便您看到单击的内容。
$(".child").on("click", function(event) { event.stopPropagation(); var l = $(this).parents('ul').length var a = 101 * l; console.log("click: " + $(this).find(">a").text()); $(".open").css({ "left": "-" + a + "%" }) })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="open"> <ul> <li class="child"> <a href="#">link1</a> <ul> <li class="child"> <a href="#">menu link1</a> </li> </ul> </li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.