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

Question

我目前正在做这个常见问题解答初学者项目，我需要一些关于 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。您只需在下一个<p>元素中切换它。我做了这个小提琴来演示。更新后的代码：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在 css 中使用而不是在 Javascript 中使用，您可以在 javascript 中height: 0使用更改为原始高度scrollHeight，即使您在 css put 中，它也会为您提供元素的主要高度height: 0。如果你有任何问题就问我。如果您愿意，我可以使用与我的代码相同的想法来编辑您的代码。var opencloseques = document.getElementsByClassName("opencloseques");&nbsp; &nbsp;&nbsp;for (let i = 0; i < opencloseques.length; i = i + 1) {&nbsp; opencloseques[i].onclick = function () {&nbsp; &nbsp; if (this.classList.contains("opened") == false) {&nbsp; &nbsp; &nbsp; this.parentElement.getElementsByClassName("answer")[0].style.height = this.nextElementSibling.scrollHeight + "px";&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; this.classList.add("opened")&nbsp; &nbsp; } else {&nbsp; &nbsp; this.parentElement.getElementsByClassName("answer")[0].style.height = "0";&nbsp; &nbsp; &nbsp; this.classList.remove("opened")&nbsp; &nbsp; }&nbsp; }}.questionanswer .answer {&nbsp; height: 0;&nbsp; overflow: hidden;&nbsp; transition: all 0.3s linear;}<div class="all">&nbsp; &nbsp; <div class="questionanswer">&nbsp; &nbsp; &nbsp; &nbsp; <button class="opencloseques">Click Me<span class='span'>+</span></button>&nbsp; &nbsp; &nbsp; &nbsp; <div class="answer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;<div class="questionanswer">&nbsp; &nbsp; &nbsp; &nbsp; <button class="opencloseques">Click Me<span class='span'>+</span></button>&nbsp; &nbsp; &nbsp; &nbsp; <div class="answer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>