Question

点击其中一个navitem类应该隐藏ID为“hammenu”的div;但它并不隐藏。 CSS的显示设置为“flex”，我测试了这个条件。仍然不想隐藏。任何建议都将不胜感激。

$(document).ready(function() {
  $(".hammenucntr").click(function(e) {
    var pos = $(this).position();
    $("#hammenu").css({
      "left": (pos.left + 20) + "px"
    }).show();
  })
  $(".navitem").click(function(e) {
    if ($("#hammenu")){ 
        $("#hammenu").hide();
      }
    })
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrapper">
  <div id="navm">
    <div class="hammenucntr">
      <i class="fas fa-bars"></i>
      <div id="hammenu" class="navmenucntr">
        <div class="navitem">Home</div>
        <div class="navitem">Test 1</div>
        <div class="navitem">Test 2</div>
        <div class="navitem">Test 3</div>
        <div class="navitem">Test 4</div>
        <div class="navitem">Test 5</div>
        <div class="navitem">Test 6</div>
      </div>
    </div>
  </div>

更新：好吧，这个问题始于一个完整的火车残骸。我创造了一个演示这个问题的小提琴。我为试图快速提问而道歉。

JS Fiddle

Answer 1

你的第一个点击处理程序$（“。hammenucntr”）。点击$（“。navitem”）之前点击它。点击处理程序，原因.navitem是.hammenucntr的孩子。您应该在第二个处理程序中使用e.stopPropagation（）来阻止将冒泡事件发送到其父级。

有关活动阶段的更多信息：https://javascript.info/bubbling-and-capturing

在jQuery中隐藏div的问题

1 个答案: