HTML

Question

我有一个侧边栏，可以在按下图像时显示。但是，当我在侧边栏外单击时，任何不是侧边栏的区域都不会关闭。我尝试查找它，但没有找到解决方案。

我对 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()">&times;</a>
  <a href="#"><img src="clubsIcon.svg" style="width: 30px; height: 30px;" align="center"></a>
  <a href="#"> &#8594;  <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>

Answer 1

您的代码中错误的行是：

if (!event.target == side) {

as !event.target 将 return 一个布尔值，然后您将其与一个元素进行比较。所以你总是会从这个比较中得到否定的回应。

应该是：

if (event.target !== side) {

一旦解决了这个问题，您还会遇到逻辑问题，因为开启按钮位于边栏之外。除了您现有的检查以确保 window 单击事件不是来自侧边栏之外，您还需要添加检查以确保 window 单击事件不是来自开启器按钮。请参阅下面的代码更改：

<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>

javascript:

window.onclick = function(event) {
  if (sideBarOpen) {
    if (event.target !== side && event.target !== document.getElementById('openIcon')) {
      closeNav();
    }
  }
}

HTML - 在侧边栏外单击时不会关闭侧边栏

HTML - Sidebar not closing when clicking outside of it

javascript

css

sidebar