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()处理程序在运行之前先运行{em> 。由于您没有单击DIV，因此它会隐藏DIV。然后onclick处理程序运行，它看到DIV是隐藏的，因此它再次显示出来。

在DIV之外检测到单击时，还需要排除菜单标题上的单击。

您不应在每次调用onclick时添加mouseup处理程序，因为您将创建多个处理程序，这些处理程序将在您下次单击时运行。只需声明一次该事件处理程序，然后简单地关闭hideMenu()菜单即可。

: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;
}

为什么再次按下按钮时块关闭无效？

1 个答案: