首頁猿問手風琴顯示/隱藏常見問題解答

手風琴顯示/隱藏常見問題解答

JavaScript

波斯汪 2024-01-18 20:32:42

我目前正在做這個常見問題解答初學者項目，我需要一些關于 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'); } }) })})```

查看完整描述

2 回答

Cats萌萌

TA貢獻1805條經驗獲得超9個贊

您將在每次單擊時切換所有元素上的類.answer。

您只需在下一個<p>元素中切換它。

我做了這個小提琴來演示。

更新后的代碼：

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

containerQs.forEach(container => {

? container.addEventListener('click', () => {

? ? ? container.nextElementSibling.classList.toggle('active');

? })

})

反對回復 2024-01-18

慕村225694

TA貢獻1880條經驗獲得超4個贊

我沒有使用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;

}

<button class="opencloseques">Click Me<span class='span'>+</span></button>

<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>

<button class="opencloseques">Click Me<span class='span'>+</span></button>

</div>

反對回復 2024-01-18

2 回答
0 關注
243 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

手風琴顯示/隱藏常見問題解答

手風琴顯示/隱藏常見問題解答

2 回答

添加回答