Javascript 如何创建自动隐藏侧边栏

我试图生成一个侧边栏，通过单击除侧边栏（使用js或css）之外的其他东西来自动隐藏侧边栏

我的代码是：

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}
</script>

...

<div id="mySidenav" class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}
...
☰ 打开

css是：

<style>
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
</style>

.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}

我使用了HTML、JavaScript和CSS

谢谢

1）为您的身体添加一个点击事件

2） 检查单击的目标是否具有类“.sidenav”，或者是否具有该类的父级

---

3） 如果没有，请隐藏侧边栏，例如，通过将“显示”设置为“无”

您可以尝试以下方法

<style>
    #mySidenav {
        display: none;
    }
</style>

<script>
  document.body.addEventListener('click', function (e) {
    if (e.target.parentNode.id === 'mySidenav') {
      document.getElementById("mySidenav").style.display = "block";
      e.preventDefault();
      return;
    }
    document.getElementById("mySidenav").style.display = "none";
  }, true);

  function openNav() {
    document.getElementById("mySidenav").style.display = "block";
  }
</script>

<div id="mySidenav" class="sidenav">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

#mySidenav{
显示：无；
}
document.body.addEventListener（'click'，函数（e）{
if（e.target.parentNode.id==='mySidenav'）{
document.getElementById（“mySidenav”）.style.display=“block”；
e、 预防默认值（）；
返回；
}
document.getElementById（“mySidenav”）.style.display=“无”；
}，对）；
函数openNav（）{
document.getElementById（“mySidenav”）.style.display=“block”；
}
☰ 打开

尝试下面的解决方案

.sidenav{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}

函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}
addEventListener（'click'，函数（e）{
如果（！document.getElementById（'mySidenav'）。包含（e.target）和&！document.getElementById（'myMenu'）。包含（e.target））{
//在框中单击
document.getElementById（“mySidenav”）.style.width=“0px”；
}否则{
//document.getElementById（“mySidenav”）.style.width=“0px”；
}
});
☰ 打开

$（函数（）{
$（“#火腿图标”）。在（“单击”上，函数（e）{
$（“#mySidenav”）.addClass（“cstm-w”）；
e、 停止传播（）
});
$（文档）。在（“单击”）上，函数（e）{
if（$（e.target）.is（“#火腿图标”）==false）{
$（“#mySidenav”）.removeClass（“cstm-w”）；
}
});
});
.sidenav{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.cstm-w{
宽度：250px；
}

☰ 打开
我认为你的答案是正确的。但是我不能写你的想法。我想如果你看看其他答案，比如阿尔伯特·阿拉古洛夫（Albert Allagulov）或维沙尔·莫迪（Vishal modi）的答案，你会发现实现了我所描述的。不过，我建议您尝试理解发生了什么，并尝试确定每个步骤发生在代码中的什么位置，以便更容易根据需要更改代码