addEventListener 在第一次点击时不起作用

Question

此代码用于打开和关闭手风琴菜单，但我添加到 'acc' 的事件在第一次点击时不起作用。

let acc = document.getElementById("acc");
let list = document.getElementById("list");
let rest = document.getElementById("rest");
let nav = document.getElementById("nav");
let line = document.getElementsByClassName("line")

acc.addEventListener("click", () => {
  if (list.style.left == '-50%') {
    list.style.left = "0";
    Array.prototype.forEach.call(line, function(value, index) {
      line[index].style.backgroundColor = "lightBlue";
    });
  } else {
    list.style.left = "-50%";
    Array.prototype.forEach.call(line, function(value, index) {
      line[index].style.backgroundColor = 'rgba(0, 0, 0, 0.781)';
    });
  }
});

rest.addEventListener("click", () => {
  list.style.left = "-50%";
  Array.prototype.forEach.call(line, function(value, index) {
    line[index].style.backgroundColor = 'rgba(0, 0, 0, 0.781)';
  });
})

<nav class="nav" id="nav">
  <p class="header">koooooooooooooon</p>
  <button class="accordion" id="acc">
        <div class="wrap">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>
      </button>
</nav>
<div class="list" id="list">
  <ul class="ul">
    <li><a href="#">home</a></li>
    <li><a href="konkor.html">konkor</a></li>
    <li><a href="arshad.html">konkor arshad</a></li>
    <li><a href="nahaii.html">emtehan nahaii</a></li>
  </ul>
</div>
<div class="rest" id="rest">
  <p class="p">welcome to our lil app</p>
</div>

我想不出任何其他方法来做到这一点。

Answer 1

对于此综合症，典型的问题是：CSS 覆盖。如果您通过 css class 菜单默认隐藏，那么在第一次单击时，脚本将检测您认为的对立面。在样式属性中设置初始值，或者使用classes来确定元素的当前状态。一点解释：如果你只使用纯 JavaScript，它不会关心你在 Element 和 class 上设置的样式设置。它仅 return 那些直接在具有 style 属性的元素上设置的样式。

即。您通过 css 将元素的左侧属性设置为 -50%。如果您调用 style.left，JavaScript 将 return ""，因为它无法检测到 CSS class' 值。然后在第二次单击时它会正常工作并且它将 return -50% 比 0 再 -50%。这将是不可见的，因为样式属性将在第一次单击时设置为一个值，该值是您之前使用 class 设置的默认值。

我还要注意，jQuery 的情况并非如此。如果您使用 jQuery，它会以某种方式检测 Elements 上的属性，这些属性是通过 classes 应用的。

addEventListener 在第一次点击时不起作用

addEventListener not working on first click

javascript

accordion

dom-events