在div外部单击时如何关闭菜单? [英] How to close menu when clicking outside of the div?
本文介绍了在div外部单击时如何关闭菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望能够在用户单击外部时关闭弹出菜单。如何在纯JS中完成此操作?
I want to be able to close a popup menu when the user clicks outside. How can I accomplish this in pure JS?
这是我目前正在使用的代码:
Here is the code I'm currently working with:
function list(){
var r= document.getElementById('l2');
if (r.style.height==="0px"){
r.style.height="500px"
} else {
r.style.height="0px";}
}
#logo-menu img {
width: 4vw;
height: 2.79vw;
border-radius: 3px;
border: 0px solid rgba(0, 0, 0, 0.5);
transition: 0.3s;
z-index: 3;
margin: 0% 0% 0% 0%;
position: relative;
top: 0.0vw;
background: rgba(230, 230, 230, 1);
}
#logo-menu img:hover {
filter: invert(100%);
}
#logo-menu img:active {
filter: saturate(20);
transform: scale3d(1.01, 1.01, 1.01);
}
#l2 {
margin: -0.17% 0% 0% 0%;
}
#l2 ul {
width: 100%;
height: auto;
list-style-type: none;
padding: 0px 0px 4% 0px;
overflow: auto;
}
#l2 li a {
width: 20.7vw;
height: auto;
line-height: 1.2;
font-weight: bold;
font-size: 0.8vw;
word-break: break-word;
text-align: left;
color: black;
text-decoration: none;
background: rgba(255, 255, 255, 1);
display: block;
margin: 3.5% 0% -2% 1.5%;
padding: 1.5% 0% 2% 0%;
overflow: hidden;
border-radius: 5px;
float: left;
position: relative;
left: 4%;
}
#l2 p {
width: 100%;
height: auto;
position: relative;
left: 2%;
top: 0.5vw;
}
#l2 img {
width: 3.5vw;
height: 3.4vw;
float: left;
margin: 0.5% 0% 0% 1%;
border-radius: 5px;
background: rgba(255, 255, 255, 1);
}
#l2 li:hover>a {
background: rgba(0, 0, 0, 1);
color: white;
}
#l2 li a:hover img {
filter: invert(100%);
}
#l2 li:active>a {
background: rgba(20, 20, 20, 1);
color: white;
}
.dropdown-content {
background: rgba(235, 235, 235, 1);
overflow: auto;
width: 100%;
float: left;
height: 0px;
}
<div id="logo-menu"><img src="https://png.icons8.com/metro/1600/star.png" onclick="list()" class="dropbtn" /></div>
<div id="l2" class="dropdown-content">
<ul>
<li>
<a href="list.html"><img src="pic1.png" />
<p>list item 1</p>
</a>
</li>
<li>
<a href="list.html"><img src="pic2.png" />
<p>list item 2</p>
</a>
</li>
<li>
<a href="list.html"><img src="pic3.png" />
<p>list item 3</p>
</a>
</li>
<li>
<a href="list.html"><img src="pic4.png" />
<p>list item 3</p>
</a>
</li>
<li>
<a href="list.html"> <img src="pic5.png">
<p>list item 4</p>
</a>
</li>
<li>
<a href="list.html"> <img src="pic6 .png">
<p>list item 5</p>
</a>
</li>
<li>
<a href="list.html"><img src="pic7 .png">
<p>list item 6</p>
</a>
</li>
<li>
<a href="list.html"><img src="pic8 .png">
<p>list item 7</p>
</a>
</li>
<li>
<a href="list.html"><img src="pic9 .png">
<p>list item 8</p>
</a>
</li>
<li>
<a href="list.html"><img src="pic10 .png">
<p>list item 9</p>
</a>
</li>
</ul>
</div>
推荐答案
您可以尝试 window.addEventListener 。我假设div以外的意思是l2&徽标菜单区希望下面的代码对您有所帮助。
You can try window.addEventListener. I've assumed outside of div means l2 & logo-menu div. Hopes below code helps you.
window.addEventListener('click', function(e){
if (!document.getElementById('l2').contains(e.target) && (!document.getElementById('logo-menu').contains(e.target))){
alert("Clicked outside l2 and logo-menu");
document.getElementById('l2').style.height="0px"; //the same code you've used to hide the menu
}
})
这篇关于在div外部单击时如何关闭菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文