我试图在单击菜单图标时使 left=0vw 但它不起作用。CSS 和 html 工作得很好我是新手，如果它如此明显，不要取笑 :'(var menuEl = document.getElementsByClassName("bx-menu");var navEl = document.getElementsByClassName("nav");function closenav(){ if(navEl.style.left === "-100vw"){ navEl.style.left = "0vw"; } else { navEl.style.left = "-100vw"; }}menuEl.addEventListener("click",closenav());
3 回答
慕斯709654
TA贡献1840条经验 获得超5个赞
document.getElementsByClassName 返回具有给定类名的所有元素的数组。
要获得可能是您想要的第一个元素，您需要选择此数组的第一个元素。
还要注意下面传递的函数。
这是您更改后的代码
var menuEl = document.getElementsByClassName("bx-menu")[0];
var navEl = document.getElementsByClassName("nav")[0];
function closenav(){
if(navEl.style.left === "-100vw"){
navEl.style.left = "0vw";
} else {
navEl.style.left = "-100vw";
}
}
menuEl.addEventListener("click",closenav);// Note you need to pass the function here not call the function so I’ve removed the ()
var menuEl = document.getElementsByClassName("bx-menu");
var navEl = document.getElementsByClassName("nav");
function closenav(){
if(navEl.style.left === "-100vw"){
navEl.style.left = "0vw";
} else {
navEl.style.left = "-100vw";
}
}
// 你需要这个两次吗？？如果是这样再次删除 () menuEl.addEventListener("click",closenav());
如果导航栏是唯一的，您可能想给它一个唯一的 ID，然后您可以使用 document.getElementById 选择它
森林海
TA贡献2011条经验 获得超2个赞
具体看document.getElementsByClassName("bx-menu")[0]，我添加了[0]作为getElementsByClassName返回的类的出现数组。
closenav 还要确保在像这样将它添加为事件监听器时删除括号：menuEl.addEventListener("click", closenav);或者像我在下面的代码片段中所做的那样将整个函数封装在事件监听器中。
var menuEl = document.getElementsByClassName("bx-menu")[0];
menuEl.addEventListener("click", function (event) {
var navEl = document.getElementsByClassName("nav")[0];
if(navEl.style.left === "-100vw"){
navEl.style.left = "0vw";
} else {
navEl.style.left = "-100vw";
}
});
.nav {
background-color: blue;
height: 100px;
width: 100px;
position: absolute;
}
<div class="bx-menu">
Click here!
</div>
<div class="nav" style="left: -100vw;">
</div>
噜噜哒
TA贡献1784条经验 获得超7个赞
一个建议是使用#id而不是.class通过使用来获取唯一元素getElementById。否则，如果您使用getElementsByClass.
我还建议：
a) 使用transform: translate而不是动画，left因为 left 会导致重新计算所有元素，而 transform 只考虑移动元素，并且
b) 切换一个类而navEl.classList.toggle()不是在你的方法中查找样式属性。
不要介意CSS。这主要是为了设置东西。
let navEl = document.getElementById("nav");
let hamburgerEl = document.getElementById("hamburger");
hamburgerEl.addEventListener("click", toggleMenu);
function toggleMenu() {
navEl.classList.toggle("open");
}
#nav {
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 400px;
padding: 1rem; /* 'rem' is the size of the font in the body element */
text-align: center;
background-color: lightblue;
border-right: 1px solid darkgrey;
transform: translateX(-100%);
transition: transform 400ms;
}
#nav.open { /* the event listener toggles this class */
transform: translateX(0px);
}
#hamburger {
position: relative; /* in order to use z-index to place #hamburger over the menu */
z-index: 100;
width: 20px;
height: 20px;
display: flex; /* to center the strokes */
align-items: center;
cursor: pointer;
}
#strokes,
#strokes::before,
#strokes::after
{
width: 100%;
height: 2px;
background-color: black;
}
#strokes::before, /* pseudo-elements */
#strokes::after {
content: '';
display: block;
}
#strokes::before {
transform: translateY(-6px);
}
#strokes::after {
transform: translateY(4px);
}
<body>
<div id="nav">
MENU
</div>
<div id="hamburger">
<div id="strokes"></div>
</div>
</body>
添加回答
举报
0/150
提交
取消