使用javascript创建手风琴风格的子菜单

Question

我想创建一个手风琴风格的菜单，类似于this demonstration available from W3 Schools。但是，我想改变一些事情。

在我的手风琴菜单上，如果其中一个菜单选项已经展开（上例中“活动”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";
    } 
  });
}

对不起，我错过了，看看这个。我想这会解决你的问题