[英]HTML - Sidebar not closing when clicking outside of it
我有一个侧边栏,显示何时按下图像。 但是,当我在侧边栏外部单击时,不是侧边栏的任何区域都不会关闭。 我尝试查找它,但没有找到解决方案。
我对html不太熟悉,所以这可能很容易解决。
var side = document.getElementById('mySidenav'); sideBarOpen = false; function openNav() { document.getElementById("mySidenav").style.width = "300px"; document.getElementById("arrow").style.transform = "rotate(90deg)"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; sideBarOpen = true; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("arrow").style.transform = "rotate(0deg)"; document.body.style.backgroundColor = "white"; sideBarOpen = false; } window.onclick = function(event) { if (sideBarOpen) { if (!event.target == side) { closeNav(); } } }
<div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#"><img src="clubsIcon.svg" style="width: 30px; height: 30px;" align="center"></a> <a href="#"> → <img src="srIcon.svg" style="width: 30px; height: 30px;" align="center"></a> <a href="#"><img src="cricketIcon.svg" style="width: 30px; height: 30px;" align="center"></a> <a href="#"><img src="fblaIcon.svg" style="width: 30px; height: 30px;" align="center"></a> <a href="#"><img src="roboticsIcon.svg" style="width: 30px; height: 30px;" align="center"></a> </div> <div style="font-size:30px;cursor:pointer;" onclick="openNav()"> <img src="arrow.png" style="width: 20px; height: 20px;" id="arrow" class="arrowclass"> </div>
您代码中错误的行是这样的:
if (!event.target == side) {
作为!event.target
将返回一个布尔值,然后将其与元素进行比较。 因此,您总是会从此比较中得到负面的回应。
它应该是:
if (event.target !== side) {
整理完毕后,您还会遇到逻辑问题,因为打开器按钮位于侧边栏的外部。 除了现有的检查不是来自边栏的检查之外,您还需要添加检查窗口单击事件是否不是来自打开按钮的检查。 请参阅下面的代码更改:
<div id="openIcon" style="font-size:30px;cursor:pointer;" onclick="openNav()">
<img src="arrow.png" style="width: 20px; height: 20px;" id="arrow" class="arrowclass">
</div>
javscript:
window.onclick = function(event) {
if (sideBarOpen) {
if (event.target !== side && event.target !== document.getElementById('openIcon')) {
closeNav();
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.