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类隐藏菜单，那么在第一次单击时脚本将检测oposit您的想法。在style属性中设置初始值，或使用类来确定元素的当前状态。一个小解释：如果你只使用纯JavaScript，它不会关心你在Element上设置的样式设置。它仅返回使用style属性直接在元素上设置的样式。

即。您通过css将元素的Left属性设置为-50％。如果你调用""，JavaScript将返回style.left，因为它无法检测CSS类的值。然后在第二次点击它将正常工作，它将返回-50%比0再次-50%。这将是不可见的，因为style属性将设置为第一次单击时的值，这是您先前使用类设置的默认值。

另外我想要注意，在jQuery的情况下不是这样。如果你使用jQuery，它会以某种方式检测Elements上的属性，这些属性是通过类应用的。