使用javascript创建手风琴式子菜单

Question

我想创建一个手风琴风格的菜单，类似于此演示可从W3学校获得。不过，我想改变几件事。

在我的手风琴菜单上，如果其中一个菜单选项已经展开(上面示例中的“活动”CSS类的一部分)，并且用户单击了另一个菜单项，则当前展开的菜单应该会在刚刚单击的项展开之前崩溃。

有人能帮我实现这个目标吗？谢谢

Answer 1

将javascript代码更改为

​

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    var clicked = this;
    [].slice.apply(acc).forEach(function(item, index){
      var panel = item.nextElementSibling,
          clicked_index = [].slice.apply(acc).indexOf(clicked);
      if (index !== clicked_index) {
      	item.classList.remove("active");
        panel.style.maxHeight = null;
      }     
    });    
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

​

抱歉，我错过了，看看这个。我想这能解决你的问题