【发布时间】：2021-03-16 16:59:45
【问题描述】：
我一直在制作一个在桌面上工作的汉堡菜单，通过事件监听器打开和关闭。
它工作得很好，但后来我想这样做，如果用户在汉堡菜单之外点击它也会关闭菜单。
我发现了一些 java 脚本，它使用一些逻辑来表示如果不是导航则关闭菜单。当您在菜单外单击时它可以工作，但问题是切换停止关闭菜单。
我将代码分成两部分。 第一个代码块是使用切换的代码。 第二个块是我用来尝试使菜单外的点击工作的代码。
我想我已经盯着这个很久了，似乎找不到解决办法。
提前感谢您的帮助。
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
a{
color: #fff;
}
.ic-burger{
width: 50px;
height: 50px;
background: #000;
display: block;
position: relative;
z-index: 10;
}
.ic-nav ul {
list-style: none;
padding-left: 0px;
display: flex;
flex-direction: column;
right: 0px;
top: 0px;
height: 100%;
position: fixed;
z-index: 5;
overflow: auto;
margin: 0px;
padding-left: 20px;
padding-right: 20px;
}
html.ic-show .ic-nav:before{
content: '';
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: 0;
background-color: rgba(18,18,18,0.7);
z-index: 1;
width: 100%
}
.ic-second-level{
opacity: 0;
visibility: hidden;
transition: all 200ms linear;
padding: 0px;
padding-top: 100px;
background: #1e1e1e;
}
html.ic-show .ic-second-level{
opacity: 1;
visibility: visible;
}
</style>
<nav class="ic-nav">
<!-- <div class="ic-burger-bkg"> -->
<ul class="ic-burger-container">
<li>
<a href="javascript:void(0);" class="ic-burger" aria-expanded="false" aria-controls="menu" id="burger-icon">
<div class="nav-icon">
Burger <br>toggle
</div>
</a>
<!-- ############ -->
<ul class="ic-second-level" role="region" id="menu" aria-labeledby="burger-icon">
<li class="top-li">
<a href="/about/" class="">About</a>
</li>
<li class="top-li">
<a href="/news/" class="">News</a>
</li>
<li class="top-li">
<a href="/team/" class="">Team</a>
</li>
<li class="top-li">
<a href="/contact/" class="">Contact</a>
</li>
</ul>
<!-- ############ -->
</li>
</ul>
<!-- </div> -->
</nav>
</body>
<script>
var documentElement = document.querySelector("html");
var sidebarIsOpen = () => documentElement.classList.contains("ic-show");
var openSidebar = () => {
documentElement.classList.add("ic-show");
};
var closeSidebar = () => {
documentElement.classList.remove("ic-show");
};
document.querySelector('.ic-burger').addEventListener("click", function() {
sidebarIsOpen() ? closeSidebar() : openSidebar();
});
</script>
</html>
这是我无法与第一个友好相处的第二个代码。
let sidebar = document.querySelector(".ic-second-level");
document.addEventListener("mouseup", function(event){
// If the event didn't originate from the open button or the sidebar, close it
if(event.target !== sidebar && event.target !== openSidebar){
closeSidebar();
}
});
这是我用来帮助我的两个来源 https://dev.to/tongrhj/the-mistake-developers-make-when-coding-a-hamburger-menu-1deg Click Outside To close slide menu Javascript
【问题讨论】：
标签： javascript html navigation hamburger-menu