在不同的地方有一个菜单和点击行为,但只有按下按钮时打开菜单的功能有效。单击同一按钮时关闭同一菜单不起作用。我不知道,也许我写错了关闭条件。我无法理解。我哪里错了?
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>
最佳答案
$(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>
关于javascript - 为什么再次按下按钮时 block 关闭不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56532838/