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类隐藏菜单，则在第一次单击时，脚本将检测到相反的位置。在style属性中设置初始值，或使用类确定元素的当前状态。一个简单的解释：如果仅使用纯JavaScript，则无需担心在Element中使用类设置的样式设置。它只会返回直接在带有style属性的元素上设置的样式。

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

我还要指出，对于jQuery，这不是正确的。如果您使用jQuery，它将以某种方式检测通过类应用的Elements上的属性。

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

1 个答案: