常见问题手风琴显示/隐藏

Question

我目前正在做这个 FAQ 初学者项目，我需要一些 js 代码方面的帮助。 我该怎么做才能让它一次只显示一个答案？

这是 HTML/CSS： https://github.com/Huy-jpg/faq-accordion-card-main

这是js代码：

const containerQs = document.querySelectorAll('.detail-questions'),
      answers = document.querySelectorAll('.answers');

containerQs.forEach(container => {
  container.addEventListener('click', () => {
    answers.forEach(ans => {
      if(ans.classList.contains('active')){
        ans.classList.remove('active');
      } else{
        ans.classList.add('active');
      }
    })
  })
})```

Answer 1

您在每次点击时都在所有.answer元素上切换 class。

您只需要在下一个<p>元素中切换它，请参阅nextElementSibling 。

我做了这个小提琴来演示。

更新后的代码：

const containerQs = document.querySelectorAll('.detail-questions');

containerQs.forEach(container => {
  container.addEventListener('click', () => {
      container.nextElementSibling.classList.toggle('active');
  })
})

Answer 2

我没有使用display block inline ，因为我在打开和关闭时需要一个持续时间。 我用一个简单的 javascript 代码创建了一个非常简单的手风琴，我没有关注 css 因为你可以放任何你想要的 css，我们的重点是 javascript 的想法和一个简单的 css 代码。 使用height:0; transition: all 1s linear height:0; transition: all 1s linear in css than in Javascript 您可以使用scrollHeight在 javascript 中将height: 0更改为原始高度，即使您在 css 中放置height: 0 ，它也会为您提供元素的主要高度。 如果您有任何问题，请问我。 如果您愿意，我可以使用与我的代码相同的想法来编辑您的代码。

 var opencloseques = document.getElementsByClassName("opencloseques"); for (let i = 0; i < opencloseques.length; i = i + 1) { opencloseques[i].onclick = function () { if (this.classList.contains("opened") == false) { this.parentElement.getElementsByClassName("answer")[0].style.height = this.nextElementSibling.scrollHeight + "px"; this.classList.add("opened") } else { this.parentElement.getElementsByClassName("answer")[0].style.height = "0"; this.classList.remove("opened") } } }

 .questionanswer.answer { height: 0; overflow: hidden; transition: all 0.3s linear; }

 <div class="all"> <div class="questionanswer"> <button class="opencloseques">Click Me<span class='span'>+</span></button> <div class="answer"> <p>Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it </p> </div> </div> <div class="questionanswer"> <button class="opencloseques">Click Me<span class='span'>+</span></button> <div class="answer"> <p>Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it </p> </div> </div> </div>