Question

我是jquery的新手。我已将li嵌套在同一个名称中。我想根据单击的div级别设置li的左侧位置，并在类打开的情况下。但是，当我在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来防止这种情况

Answer 2

您必须禁用冒泡

<suite name="Suite" parallel="false" thread-count="0" verbose="2">
<test name="TestName"> <!--Do not add any other unless its necessary-->
        <classes>
            <class name="className"/>
        </classes>
 </test>

未经测试

Answer 3

您可以使用event.stopPropagation();停止传播。我添加了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>

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

3 个答案: