单击外部汉堡菜单以使用 javascript 关闭
[英]click outside burger menu to close using javascript
问题描述
I have been making a burger menu that works on desktop, opens and closes with an event listener.
我一直在制作一个在桌面上工作的汉堡菜单，通过事件监听器打开和关闭。
It works fine but then i wanted to make it so that if the use clicked outside of the burger menu it also closes the menu.它工作正常，但后来我想这样做，以便如果用户在汉堡菜单之外单击它也会关闭菜单。
I found a bit of java script that uses some logic to say that if not the navigation then close menu.我发现了一些 java 脚本，它使用一些逻辑来说明如果不是导航则关闭菜单。 it works when you click outside the menu but then the problem is that the toggle stops closing the menu.当您在菜单外单击时它可以工作，但问题是切换停止关闭菜单。
I split my code up into two sections.我将我的代码分成两部分。 The first code block is the code working with the toggle.第一个代码块是使用切换的代码。 The second block is the code that i'm using to try and make the click outside the menu work.第二个块是我用来尝试使菜单外的点击工作的代码。
I think i have been staring at this for to long and cant seem to find a solution.我想我已经盯着这个很久了，似乎找不到解决方案。
thanks in advance for any help.提前感谢您的帮助。
<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>
Here is the second bit of code i cant get to play friendly with the first.这是我无法与第一个友好相处的第二个代码。
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();
}
});
these are the two sources ive used to help me https://dev.to/tongrhj/the-mistake-developers-make-when-coding-a-hamburger-menu-1deg Click Outside To close slide menu Javascript这是我用来帮助我的两个来源
1 个解决方案
解决方案1
1 已采纳 2021-03-16 18:02:04
I am using event delegation to check if you click on the "ic-nav" element and then close it.我正在使用事件委托来检查您是否单击“ic-nav”元素然后将其关闭。 Works like charm.像魅力一样工作。
document.addEventListener('click',function(e){
if(e.target && e.target.classList == 'ic-nav'){
sidebarIsOpen() ? closeSidebar() : openSidebar();
}
});
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(); }); document.addEventListener('click',function(e){ if(e.target && e.target.classList == 'ic-nav'){ sidebarIsOpen()? closeSidebar(): openSidebar(); } });
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; }
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.