javascript - 为什么再次按下按钮时 block 关闭不起作用？

Question

在不同的地方有一个菜单和点击行为，但只有按下按钮时打开菜单的功能有效。单击同一按钮时关闭同一菜单不起作用。我不知道，也许我写错了关闭条件。我无法理解。我哪里错了？

function hideMenu(menuId) {
  if ($(menuId).is(":visible")) {
    $(menuId).hide();
  } else {
    $(".hiddenMenu:visible").hide();
    $(menuId).show('800');
  }
  
  $(document).mouseup(function(e) {
    var div = $(menuId);
    if (!div.is(e.target) && div.has(e.target).length === 0) {
      div.hide();
    }
  });

  console.log(menuId);
}

body {
  margin: 0;
  padding: 0;
  background: #040921;
}

.container {
  width: 80px;
  height: 100vh;
  background: #263154;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.container nav ul li a {
  cursor: pointer;
}

#submenuId1 {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 80px;
  background: orange;
  display: none;
}

#submenuId2 {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 80px;
  background: yellow;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <nav>
    <ul>
      <li><a onclick="hideMenu('#submenuId1')">Link</a></li>
      <li><a onclick="hideMenu('#submenuId2')">Link</a></li>

    </ul>
  </nav>
</div>
<div id="submenuId1" class="hiddenMenu">
  <nav>
    <ul>
      <li>subMenuItem1</li>
    </ul>
  </nav>
</div>
<div id="submenuId2" class="hiddenMenu">
  <nav>
    <ul>
      <li>subMenuItem1</li>
    </ul>
  </nav>
</div>

Answer 1

$(menuId).is(":visible") 永远不会返回 true。下次您单击该链接时，$(document).mouseup() 处理程序将在 onclick 处理程序运行之前运行。由于您没有单击 DIV，因此它隐藏了 DIV。然后 onclick 处理程序运行，它看到 DIV 被隐藏，所以再次显示它。

当检测到 DIV 外部的点击时，您还需要排除对菜单标题的点击。

您不应该在每次调用 hideMenu() 时都添加 mouseup 处理程序，因为您创建了多个处理程序，这些处理程序都在您下次单击时运行。只声明该事件处理程序一次，并让它简单地关闭 :visible 菜单。

function hideMenu(menuId) {
  if ($(menuId).is(":visible")) {
    $(menuId).hide();
  } else {
    $(".hiddenMenu:visible").hide();
    $(menuId).show('800');
  }

  console.log(menuId);
}

$(document).mouseup(function(e) {
  var div = $(".hiddenMenu:visible");
  if (!div.is(e.target) && div.has(e.target).length === 0 && !$(e.target).hasClass("menutitle")) {
    div.hide();
  }
});

body {
  margin: 0;
  padding: 0;
  background: #040921;
}

.container {
  width: 80px;
  height: 100vh;
  background: #263154;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.container nav ul li a {
  cursor: pointer;
}

#submenuId1 {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 80px;
  background: orange;
  display: none;
}

#submenuId2 {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 80px;
  background: yellow;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <nav>
    <ul>
      <li><a class="menutitle" onclick="hideMenu('#submenuId1')">Link</a></li>
      <li><a class="menutitle" onclick="hideMenu('#submenuId2')">Link</a></li>

    </ul>
  </nav>
</div>
<div id="submenuId1" class="hiddenMenu">
  <nav>
    <ul>
      <li>subMenuItem1</li>
    </ul>
  </nav>
</div>
<div id="submenuId2" class="hiddenMenu">
  <nav>
    <ul>
      <li>subMenuItem1</li>
    </ul>
  </nav>
</div>