事件侦听器和转换 JS

Question

我尝试使用事件侦听器（点击）来更改几个元素的不透明度，每次点击时属性都会切换。我不知道为什么我的代码不工作，也找不到我的错误，所以我需要帮助。

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>

Answer 1

您需要使用 querySelectorAll 而不是 querySelector，它只会 select 它遇到的第一个匹配元素。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

希望对您有所帮助！ :)

Answer 2

解决方案是 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;*/
}

编辑：为了切换 class，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");
      } 
    }
  })
})

Answer 3

问题是你把 class "nav2-link-con-js".

你在 css 中没有这样的 class 而这里 (! сon.classList.contains ("js")) 你是只寻找 class "js".

您需要修复 class "nav2-link-con-js".

我会这样做：

window.addEventListener("load", function() {
  document.querySelector(".hamburger").addEventListener("click", function(e) {
  const con = document.querySelector(".con");
    
  con.classList.toggle("nav2-link-con", con.classList.contains("js"));
  con.classList.toggle("js", !con.classList.contains("js"));   
  }) 
})

事件侦听器和转换 JS

Event listeners and transitions JS

javascript

css

dom-events

css-transitions