Javascript 侧菜单div接近0px时导航链接不隐藏

我试图创建一个css侧菜单，但当我关闭菜单，将div container width设置为0时，链接仍然可见

这是JSFIDLE-

有趣的是，当我将菜单设置到屏幕右侧时，我没有同样的问题。我是否需要将保证金属性添加到a项目

<div id="side-menu" class="side-nav">  
   <img id="close-side" src="https://floraisabelle.com/assets/images/hamburger-menu.png?v=aa3f825eb7" alt="">
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
</div>

var isOpen = false;
document.getElementById('close-side').addEventListener("click", function(){
    if (isOpen) {
        document.getElementById("side-menu").style.width = "0px";
        document.getElementById("close-side").style.marginLeft = "0px";
        isOpen = false;
    } else {
        document.getElementById("side-menu").style.width = "250px";
        document.getElementById("close-side").style.marginLeft = "181px";
        isOpen = true;
    } 
})

.side-nav {
  transition: .5s;
  height: 100%;
  width:0;
  background-color: rgba(120, 120, 120, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1; 
}

#close-side {
  margin-left: 0;
  margin-top: 5px;
  transition: linear .5s;
  position: fixed; 
}

var-isOpen=false；
document.getElementById（'close-side'）。addEventListener（“单击”，函数（）{
if（等参线）{
document.getElementById（“侧菜单”）.style.width=“0px”；
document.getElementById（“封闭端”）.style.marginLeft=“0px”；
isOpen=假；
}否则{
document.getElementById（“侧菜单”）.style.width=“250px”；
document.getElementById（“封闭侧”）.style.marginLeft=“181px”；
isOpen=真；
} 
})
.侧导航{
过渡：.5s；
身高：100%；
宽度：0；
背景色：rgba（120,120,120,0.1）；
位置：固定；
排名：0；
左：0；
z指数：1；
}
#近旁{
左边距：0；
边缘顶部：5px；
过渡：线性。5s；
位置：固定；
}

css

.side-hidden a {
   display: none;
}

HTML

<div id="side-menu" class="side-nav side-hidden">  

我也更新了你的小提琴

不需要等参变量

if(document.getElementById("side-menu").classList.contains('side-hidden')){
  alert('isClosed');
}else{
   alert('isOpen');
}

---

您可以更改边栏的边距而不是宽度

以下是如何做到这一点-

document.getElementById('close-side').addEventListener("click", function(){
    if (isOpen) {
        document.getElementById("close-side").style.marginLeft = "-100px";
        isOpen = false;
    } else {
        document.getElementById("close-side").style.marginLeft = "0px";
        isOpen = true;
    } 
})

然后将按钮（关闭侧）置于侧边栏div之外

<img id="close-side" src="https://floraisabelle.com/assets/images/hamburger-menu.png?v=aa3f825eb7" alt="">

<div id="side-menu" class="side-nav">  
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
</div>

---

您的问题是，您试图通过减小侧边栏的宽度来隐藏侧边栏。这只会导致它内部的一切重新定位，最终溢出。您不会在右侧看到这种情况，因为一切都在视口外流动，但它仍将在幕后发生。您应该通过修改它的

左：

位置将其隐藏到屏幕外。谢谢。有道理，我会将overflow-x设置为hidden。谢谢你的帮助！不，我不这么认为。当然，谢谢，你能投票吗？我觉得投反对票有点苛刻；-）

<img id="close-side" src="https://floraisabelle.com/assets/images/hamburger-menu.png?v=aa3f825eb7" alt="">

<div id="side-menu" class="side-nav">  
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
    <a class="" href="#">Hi</a>
</div>

.side-nav
{
   transition: all 0.5s ease;
}