Javascript accordian-折叠除活动外的所有打开实例

我使用一个简单的javascript手风琴打开/关闭列表项，如下所示。 是否可以确保在打开一个新的列表项时关闭所有打开的列表项（而不是当前的方式，即在手动关闭之前保持每个列表项打开）

代码笔在这里：

JS

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

HTML

标题
面板内容



标题
面板内容



标题
面板内容

是的，您可以再次迭代

acc

数组，关闭与闭包索引不同的手风琴

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

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
        toggleAccordion(this);
        if (this.classList.contains("active")) {
          for (var j = 0; j < acc.length; j++) {
            if (i != j) {
              acc[j].nextElementSibling.style.maxHeight = null;
            }
          }
        }
    });
}

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

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

是的，您可以在打开新手风琴之前关闭所有其他手风琴：

for (var j = 0; j < acc.length; j++) {
  var button = acc[j];

  if (button === this) continue;

  button.classList.remove("active");
  var panel = button.nextElementSibling;
  panel.style.maxHeight = null;
}

标题
面板内容



标题
面板内容



标题
面板内容

您可以通过一个切换功能来实现，该功能可以用特定的关闭状态覆盖。这样，在切换之前，您只需关闭除单击之外的所有内容。下面是示例，代码如下

var acc = document.getElementsByClassName("accordion")

const toggleAccordian = (acc, open = !acc.classList.contains('active')) => {  
  acc.classList.toggle('active', open)
  const panel = acc.nextElementSibling
  panel.style.maxHeight = open ? panel.scrollHeight + "px" : null  
}

const elems = Array.from(acc)
elems.forEach(a => {
  a.addEventListener('click', () => {
    elems
      .filter(e => e !== a)
      .forEach(e => toggleAccordian(e, false))
    toggleAccordian(a)
  })
})

---

谢谢-这非常有效，但它不允许打开列表项后关闭。这有意义吗？打开第一个项目，然后尝试关闭它。啊，对不起，我的坏，更新了示例（可能不是最干净的解决方案，但它可以工作）

for (var j = 0; j < acc.length; j++) {
  var button = acc[j];

  if (button === this) continue;

  button.classList.remove("active");
  var panel = button.nextElementSibling;
  panel.style.maxHeight = null;
}

var acc = document.getElementsByClassName("accordion")

const toggleAccordian = (acc, open = !acc.classList.contains('active')) => {  
  acc.classList.toggle('active', open)
  const panel = acc.nextElementSibling
  panel.style.maxHeight = open ? panel.scrollHeight + "px" : null  
}

const elems = Array.from(acc)
elems.forEach(a => {
  a.addEventListener('click', () => {
    elems
      .filter(e => e !== a)
      .forEach(e => toggleAccordian(e, false))
    toggleAccordian(a)
  })
})