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

Question

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

这是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菜单：\\

Answer 1

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>