javascript - 具有相同类的嵌套元素上的jquery click事件

Question

我是 jquery 的新手。我嵌套了同名的 li。我想根据点击的 li 级别设置打开类的 div 的左侧位置。但是，当我在 li 内部单击时，它占据了第一个位置。

这是我的代码

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

提前致谢

Answer 1

问题是当你点击内部 li 时，两者都发生了点击，你可以在事件中使用 stopPropagation 来防止这种情况发生