gpt4 book ai didi

javascript - 当侧边菜单 div 接近 0px 时导航链接不隐藏

转载 作者:行者123 更新时间:2023-11-30 14:53:13 24 4
gpt4 key购买 nike

我正在尝试创建一个 css 侧边菜单,但是当我关闭菜单并将 div 容器宽度设置为 0 时,链接仍然可见。

这是 jsfiddle - https://jsfiddle.net/atLvp6k7/

有趣的是,当我将菜单设置到屏幕右侧时,我没有遇到同样的问题。我需要为元素添加边距属性吗?

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

最佳答案

CSS

.side-hidden a {
display: none;
}

HTML

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

脚本

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

我也更新了你的 fiddle https://jsfiddle.net/atLvp6k7/1/

不需要isOpen变量

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

关于javascript - 当侧边菜单 div 接近 0px 时导航链接不隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47811652/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com