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

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");

    

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>