我希望能够关闭弹出菜单时,用户点击外。我如何才能实现这一点在纯JS?
以下是我目前正在使用的代码:
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>
4条答案
按热度按时间k97glaaz1#
你可以试试window.addEventListener,我假设div之外是l2 & logo-menu div,希望下面的代码能帮到你。
kupeojn62#
这对我很有效
#mylinks
具有单击.icon
时显示的内容我使用
style.display
来显示或隐藏内容。jxct1oxe3#
此功能可以通过在文档对象中附加一个事件监听器来实现,监听点击事件,然后在事件监听器中检查点击目标是否在菜单内,如果点击目标在菜单外,则可以关闭菜单。
xriantvc4#
你可以用
在你的函数内部,而不是设置px的高度。