手風琴打開按鈕

Question

我在 Codepen 上編輯的手風琴運行良好。 但是，當單擊多個問題時，我希望在當前答案打開時關閉先前的答案。 任何線索我怎么能做到這一點？

在這里寫代碼

此外，當使用 Font Awesome 4.7.0 時，以下 unicode 會正確顯示。

(f055 & f056) Unicodes

然而，隨着切換到 Font Awesome 5.14.5，Unicode 不再工作。

Answer 1

要關閉其他，請再次循環onclick內的所有按鈕，對於字體，替換font-family: "FontAwesome"; with font-family: "Font Awesome\ 5 Free";

 const accordionBtns = document.querySelectorAll(".accordion"); accordionBtns.forEach((accordion) => { accordion.onclick = function() { this.classList.toggle("is-open"); let content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { // add this line accordionBtns.forEach(acc => acc.nextElementSibling.style.maxHeight = null) content.style.maxHeight = content.scrollHeight + "px"; } }; });

 .faq-container { width: 80%; max-width: 600px; margin: 50px auto; } button.accordion { width: 100%; background: #C0C0C0; border: none; outline: none; text-align: left; padding: 15px 20px; font-size: 18px; font-weight: bold; color: #4169E1; cursor: pointer; transition: background-color 2.2s linear; } button.accordion:after { content: "\f055"; font-family: "Font Awesome\ 5 Free"; font-size: 18px; float: right; } button.accordion.is-open:after { content: "\f056"; } button.accordion:hover, button.accordion.is-open { color: #FFF; background: #4169E1; /*border-left: 2px solid #C0C0C0; border-right: 2px solid #C0C0C0; border-top: 2px solid #C0C0C0; border-bottom: 2px solid #C0C0C0;*/ }.accordion-content { font-family: Arial; font-weight: bold; color: #663399; background: #FFF; border-left: 2px solid #C0C0C0; border-right: 2px solid #C0C0C0; border-bottom: 2px solid #C0C0C0; padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-in-out; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css"> <div class="faq-container"> <h1 style="text-align: center; font-family: Arial; color: #663399">FAQ Accordion</h1> <button class="accordion">When Is It?</button> <div class="accordion-content"> <p> On The Date That We Select. <br> On The Date That We Select. </p> </div> <button class="accordion">Why Is It.</button> <div class="accordion-content"> <p> Because We Chose To. </p> </div> <button class="accordion">Where Is It</button> <div class="accordion-content"> <p> At The Place That We Select. </p> </div> </div>