事件侦听器和转换 JS

马塔内尔希哈姆

我尝试使用事件侦听器(单击)来更改多个元素的不透明度,并在每次单击时属性切换。我不知道为什么我的代码不起作用并且找不到我的错误,所以我需要帮助。

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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将JS函数传递给applet作为事件侦听器

JS-如何在事件中分配和添加侦听器?

JS:隐藏元素上的事件侦听器

如何为Firebase实现Node.Js服务器端事件侦听器?

如何/何时将事件侦听器附加到d3.js中?

数组节点js中数据更改的事件侦听器

是否可以将Tedious连接和请求事件侦听器放在Node.js的单独模块中?

节点JS异步执行和事件发出/侦听器模型

Material Design Lite-JS不应用事件侦听器

Vue.js在实例内部添加事件侦听器?

如何将事件侦听器添加到tone.js中播放的音符

Node JS事件侦听器无法按预期工作

JS事件侦听器,用于动态添加元素

如何在node.js事件侦听器中获取事件名称?

异步重新加载HTML和JS代码会使JS事件侦听器不响应重新加载的HTML代码上的点击

fabric.js将事件侦听器分配给多个事件的对象

bone.js:防止在模型更改时触发侦听器事件

Node.js事件侦听器被阻止?

Node.js变量无法传递给事件侦听器

如何在 Scala.js 中的单击事件侦听器中检索标签名称?

Ext JS 4.1:将单击事件侦听器添加到 headerCheckbox

HTML、CSS、JS:使用按钮和事件侦听器猜游戏网页:提示和重置按钮不起作用

如何减慢节点 JS 事件侦听器的速度?

来自 js 静态文件的事件侦听器指向 Django 中的错误路径

React.js:useEffect 与窗口调整大小事件侦听器不起作用

进度条的滚动事件侦听器,用于 div,而不是主体(vanilla js)

如何防止来自 Vue Js 组件中的事件侦听器的多次调用?

如何在动态字符串的反应js中事件侦听器或单击侦听器?

如何从 vanilla JS 事件侦听器修改 Vue 数据?