javascript - 当您选择另一个手风琴打开时如何确保手风琴关闭

Question

我很难弄清楚如何输入所需的代码以确保在单击另一个手风琴时会关闭活动的手风琴。

我已经看到其他显示有效解决方案的小提琴，但不知道如何将它放入我当前的代码中，尽管尝试了（我是 Javascript 的新手）。

的HTML：

<button class="syo-accordion"><h3>Sample Heading</h3></button>
     <div class="syo-panel"> <p>Some text example</p></div>

Javascript：

var acc = document.getElementsByClassName("syo-accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

标签： javascriptjqueryhtmlcss

Answer 1

当单击手风琴并向其添加.active类时，在此步骤之前，您应该检查其他手风琴是否.active已经添加了类并将其删除。

var acc = document.getElementsByClassName("syo-accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {

    for (const accordion of acc) { // looping through all of the accorion
        if (accordion.classList.contains("active")) {
            accordion.classList.remove("active"); // removing class if it contains the active class
        }
    }

    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}