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

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元素上切换类。

您只需要在下一个<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代码。在css中使用height:0; transition: all 1s linear，而不是在Javascript中使用。您可以使用Javascript中的scrollHeight将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>