Accordion JS 代码：在单击另一个手风琴时隐藏任何打开的手风琴以及如何为每个手风琴添加 + 符号

Question

添加以下代码以在页面中创建手风琴元素。 单击任何手风琴会打开手风琴，但单击另一个手风琴时手风琴不会关闭。

PHP&HTML：

 setTimeout(function() { var acc = document.getElementsByClassName("accordion"); console.log(acc.length); var i; for (i = 0; i < acc.length; i++) { alert("In the loop.") acc[i],addEventListener("click". function() { console.log("Click event called.") this;classList.toggle("active"); var panel = this.nextElementSibling. if (panel.style.display === "block") { panel;style.display = "none". } else { panel;style;display = "block", } }); } }, 500);

 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 1.5rem; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; }.active, .accordion:hover { background-color: #ccc; }.panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; }

 <?php if ( have_rows( 'question_and_answer' ) ): while ( have_rows( 'question_and_answer' ) ): the_row(); $label = get_sub_field( 'question' ); $answer = get_sub_field( 'answer' ); ?> <div class="row"> <button class="accordion"><div class="question"><?php echo $label; ?></div></button> <div class="panel"><p class="answer"><?php echo $answer; ?></p></br></div> </div> <?php endwhile; ?>

这是登台站点上页面的链接。 请参阅标题为“常见问题”的部分

Answer 1

这是因为您永远不会从任何先前单击的项目中删除活动的 class：

 setTimeout(function() { var acc = document.getElementsByClassName("accordion"); console.log(acc.length); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { const active = document.querySelector(".accordion.active"); if (active) { active.classList.remove('active'); // remove active class from accordions } this.classList.add("active"); // add it to this one // do display using css }); } }, 500);

 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 1.5rem; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; }.active, .accordion:hover { background-color: #ccc; }.panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; background: red; }.active+.panel { display: block; }

 <div class="row"> <button class="accordion"><div class="question"><?php echo $label; ?></div></button> <div class="panel"> <p class="answer"> <?php echo $answer; ?> </p> </br> </div> </div> <div class="row"> <button class="accordion"><div class="question"><?php echo $label; ?></div></button> <div class="panel"> <p class="answer"> <?php echo $answer; ?> </p> </br> </div> </div>

作为替代方案，您实际上并不需要 js 来实现这种类型的手风琴，您可以使用单选按钮和 css：

 .accordion { display: block; background-color: #eee; color: #444; cursor: pointer; padding: 1.5rem; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; }.accordion:hover { background-color: #ccc; }.panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; background: red; }.radio { display: none; }.radio:checked~.panel { display: block; }

 <div class="row"> <input type="radio" name="accordion" id="accordion1" class="radio"> <div class="question"><label class="accordion" for="accordion1"><?php echo $label; ?></label></div> <div class="panel"> <p class="answer"> <?php echo $answer; ?> </p> <br> </div> </div> <div class="row"> <input type="radio" name="accordion" id="accordion2" class="radio"> <div class="question"><label class="accordion" for="accordion2"><?php echo $label; ?></label></div> <div class="panel"> <p class="answer"> <?php echo $answer; ?> </p> <br> </div> </div>