HTML -在边栏外部单击时不关闭边栏
HTML -在边栏外部单击时不关闭边栏
提问于 2018-07-04 04:06:59
我有一个侧边栏，显示何时图像被按下。但是，当我在侧边栏之外单击时，任何不是侧边栏的区域都不会关闭。我试着查了一下，但没有找到解决方案。
我不太熟悉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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-04 10:27:01
代码中错误的代码行如下：
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();
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51162152
复制相关文章
相似问题
腾讯云开发者
