再次单击后在forEach函数中使用forEach不起作用

Question

我正在练习做FAQ手风琴，我可以在后面给出答案。

点击问题，但当我再次点击隐藏答案，它是无效的。

​

const questions = document.querySelectorAll('.questions')
const quesArr = Array.from(questions);

quesArr.forEach((ques) => {
  ques.addEventListener('click', (e) => {
    const next = ques.nextElementSibling;
    hidingAndShowing(ques, next)
  })
})

const hidingAndShowing = (ques, next) => {
  if (next.style.display = 'none') {
    next.style.display = 'block'
  } else if (next.style.display = 'block') {
    next.style.display = 'none'
  }
}

<div class="faqAccordian">
  <div class="acc-1 acc">
    <p class="questions ques-1">what is this?</p>

    <p class="answers">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, ipsam velit aut fugiat sit facilis quibusdam illo cupiditate dolorem eius repudiandae sapiente amet obcaecati animi neque odio cumque, quas mollitia.
    </p>
  </div>
  <div class="acc-2 acc">
    <p class="questions ques-2">what does it mean?</p>

    <p class="answers">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat ad tempore quis! Delectus, dolore. Dolorum in distinctio illo similique perspiciatis quia! Error porro id similique, dicta unde blanditiis ducimus laborum.
    </p>
  </div>
  <div class="acc-3 acc">
    <p class="questions ques-3">what does it do?</p>

    <p class="answers">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus ad reiciendis dolores? Similique numquam est facilis ullam repellendus repellat cum dicta quae fugit. Cupiditate fuga, eum fugiat doloribus quia nisi.
    </p>
  </div>
  <div class="acc-4 acc">
    <p class="questions ques-4">what does it want to do?</p>

    <p class="answers">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos perferendis placeat corrupti nam quibusdam est impedit sed optio quia repellendus laborum, ipsa error sapiente culpa consequuntur quaerat nobis incidunt quae.
    </p>
  </div>
</div>

​

它在第一次单击时显示nextElementSibling，但在第二次显示时，它没有做任何事情，甚至没有抛出错误。

Answer 1

问题在于您使用if (next.style.display = 'none') {}的条件。

从技术上讲，有两个问题，首先是next.style.display，它没有提供任何东西，而是使用getComputedStyle函数来获取任何属性值--在本例中是'display'，这是因为计算样式包含设置为一个元素的所有CSS属性。即使没有将属性设置为元素。您仍然会在计算样式中找到该属性。

第二个是if条件=中的一个小错误，应该是==。

工作实例：

​

const questions = document.querySelectorAll('.questions')
const quesArr = Array.from(questions);

questions.forEach((ques) => {
  ques.addEventListener('click', (e) => {
    const next = ques.nextElementSibling;
    hidingAndShowing(ques, next)
  })
})

const hidingAndShowing = (ques, next) => {
  if (window.getComputedStyle(next).display == 'none') {
    next.style.display = 'block'
  } else if (window.getComputedStyle(next).display == 'block') {
    next.style.display = 'none'
  }
}

<div class="faqAccordian">
  <div class="acc-1 acc">
    <p class="questions ques-1">what is this?</p>

    <p class="answers">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, ipsam velit aut fugiat sit facilis quibusdam illo cupiditate dolorem eius repudiandae sapiente amet obcaecati animi neque odio cumque, quas mollitia.
    </p>
  </div>
  <div class="acc-2 acc">
    <p class="questions ques-2">what does it mean?</p>

    <p class="answers">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat ad tempore quis! Delectus, dolore. Dolorum in distinctio illo similique perspiciatis quia! Error porro id similique, dicta unde blanditiis ducimus laborum.
    </p>
  </div>
  <div class="acc-3 acc">
    <p class="questions ques-3">what does it do?</p>

    <p class="answers">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus ad reiciendis dolores? Similique numquam est facilis ullam repellendus repellat cum dicta quae fugit. Cupiditate fuga, eum fugiat doloribus quia nisi.
    </p>
  </div>
  <div class="acc-4 acc">
    <p class="questions ques-4">what does it want to do?</p>

    <p class="answers">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos perferendis placeat corrupti nam quibusdam est impedit sed optio quia repellendus laborum, ipsa error sapiente culpa consequuntur quaerat nobis incidunt quae.
    </p>
  </div>
</div>

​