javascript - 切换后将最大高度分配给内部元素

非常感谢任何可以帮助我解决问题的人

这是HTML和JS：

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

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("razvorot");
        var panel = document.getElementsByClassName('sub-menu');
        if (panel.style.maxHeight){
            panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
    }
}

<li class="razvernut">
    <span class="span"></span>
    <span class="otherspan"></span>
    <a>Show ul.sub-menu with 0 max-height</a>
    <ul class="sub-menu">...</ul>
</li>

我的js能力很低，请告诉我错误在哪里，因为脚本无法在页面内定义.sub菜单：\

最佳答案

getElementsByClassName返回元素列表，您可以遍历该列表并使用循环中的每个元素，或者您可以使用panel [0]。

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

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
    this.classList.toggle("razvorot");
    var panel = document.getElementsByClassName('sub-menu');
    if (panel[0].style.maxHeight){
        panel[0].style.maxHeight = null;
    } else {
      panel[0].style.maxHeight = panel[0].scrollHeight + "px";
    }
}
}

<li class="razvernut">
<span class="span"></span>
<span class="otherspan"></span>
<a>Show ul.sub-menu with 0 max-height</a>
<ul class="sub-menu">...</ul>
</li>