我尝试使用事件侦听器(单击)来更改多个元素的不透明度,并在每次单击时属性切换。我不知道为什么我的代码不起作用并且找不到我的错误,所以我需要帮助。
window.addEventListener("load", function() {
document.querySelector(".hamburger").addEventListener("click", function(e) {
const con = document.querySelector(".con");
const links = document.querySelectorAll(".nav-link");
if (!con.classList.contains("js")) {
con.classList.toggle("con-js");
//forEach link (in const links) toggle the "link-toggle" class
}
})
})
.con-js {
width: 100%;
overflow: hidden;
}
.con ul li a {
opacity: 0;
/*transition for the opacity: opacity .8s 1s*/
}
.link-toggle {
opacity: 1;
/*transition for the opacity: opacity .3s 0s;*/
}
<div class="hamburger" ">
<!--Hamburger Content-->
</div>
<div class="con ">
<ul>
<li><a href="index.html " class="nav-link ">A</a></li>
<li><a href="menu.html " class="nav-link ">B</a></li>
<li><a href="# " class="nav-link ">C</a></li>
</ul>
</div>
解决方案是 CSS 选择器的特殊性。
给定选择器.con ul li a
,为了能够应用opacity: 1
,您应该将选择器更改.link-toggle
为.con ul li a.link-toggle
。
否则,opacity: 0;
将更具体地使用而不是opacity: 1;
.
.con ul li a.link-toggle {
opacity: 1;
/*transition for the opacity: opacity .3s 0s;*/
}
编辑:为了切换类,querySelectorAll
将做的伎俩:
window.addEventListener("load", function() {
document.querySelector(".hamburger").addEventListener("click", function(e) {
const con = document.querySelector(".con");
if (!con.classList.contains("js")) {
con.classList.toggle("con-js");
const links = document.querySelectorAll(".nav-link");
for(const link of links){
link.classList.toggle("link-toggle");
}
}
})
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句