Javascript 使用HTML、JS和CSS单击时只打开一个下拉面板

我有一个下拉菜单列表的链接固定在左侧的网页，我试图建立。我得到了w3学校的HTML和CSS的结构，但适合我的页面。我喜欢它出现的方式，因为它是一个打开面板来显示链接的平滑过渡，但是因为它是固定的，如果所有下拉面板都打开了，你就不能向下滚动屏幕来查看。我本来想让它滚动，如果它变得太长，但我更愿意让它在只有一个下拉面板是开放的时间。我希望这种功能，如我仍然保持顺利过渡的开幕式和闭幕式小组。我还在学习，所以我不知道如何修改代码来做我想做的事情，所以我希望有人能帮助我。我希望只使用HTML、JS和CSS。以下是我在页面中使用的核心部分

CSS

HTML

标题1
标题2
标题3

JS

var acc=document.getElementsByClassName（“下拉菜单”）；
对于（i=0；i

希望这有助于：

<script>
   var acc = document.getElementsByClassName("drop-down");

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            var panel = this.nextElementSibling;
            var maxHeight = panel.style.maxHeight;

            //Collapse all divs first
            var divs = document.getElementsByClassName("drop-down-panel");
            for (i = 0; i < divs.length; i++) {
                 divs[i].style.maxHeight = null;
            };

            if (maxHeight)
                panel.style.maxHeight = null;
            else
                panel.style.maxHeight = panel.scrollHeight + "px"; 
        }
    }
</script>

var acc=document.getElementsByClassName（“下拉列表”）；
对于（i=0；i

根据@Mr.Bungle的评论更新代码

<script type="text/javascript">
   var acc = document.getElementsByClassName("drop-down");

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            var panel = this.nextElementSibling;
            var maxHeight = panel.style.maxHeight;

            //Collapse all divs first
            var divs = document.getElementsByClassName("drop-down-panel");
            for (i = 0; i < divs.length; i++) {
                divs[i].style.maxHeight = null;
                divs[i].previousElementSibling.classList.remove("active");  //new code to remove "active" class for all headers (li tags)
            };

            this.classList.toggle("active");  //Moved this line from top

            if (maxHeight)
            {
                panel.style.maxHeight = null;
                this.classList.remove("active"); //Added this line to remove "active" class for the current header
            }
            else
                panel.style.maxHeight = panel.scrollHeight + "px"; 
        }
    } 
</script>

var acc=document.getElementsByClassName（“下拉列表”）；
对于（i=0；i

给你一个解决方案

var prevClick=-1；
dropPanel=功能（t）{
var acc=document.getElementsByClassName（“下拉列表”）；
对于（i=0；i

ul{位置：固定；}
李{
文本对齐：左对齐；
显示：块；
文字装饰：无；
}
li.下拉列表{
光标：指针；
转换：0s；
}
分区下拉面板{
最大高度：0；
溢出：隐藏；
过渡：最大高度为0.5s；
}
a、 面板{
文本对齐：左对齐；
显示：块；
文字装饰：无；
}

标题1
标题2
标题3

如果它使用不引人注目的javascript事件绑定，并且HTML是有效的，那么效果会更好。您不能将

divs

作为

ul

的子项。我尝试了它，但是如果您单击打开标题1，关闭它，然后再次尝试打开它，它不会打开更新的代码。谢谢@Shiladitya@JonP你能解释一下为什么Div不能是ul的孩子吗？如何生成“有效”HTML？虽然MDN不是官方规范，但它通常比官方W3C规范更友好：。特别注意：允许的内容，零个或多个

元素，这些元素通常包含嵌套的

或

元素。要使其有效，请将

divs

放在

li

（官方规范：）这一个运行良好，但如上所述，由于某种原因，您无法再次打开同一个标题？我想我们大概是在同一时间发表了评论，我对其进行了测试，效果非常好，非常感谢！我希望我能得到更多的帮助，代码按预期工作，但影响了风格。还有更多。当您悬停标题时，它应该更改颜色。它有一个+/-符号，分别表示打开/最小化。如果单击标题，+，则应变为-，并应保持给定的颜色，直到最小化，-，再次变为+。然而，如果你打开并最小化不同的标题，有些仍然是彩色的，并且有一个-即使最小化了，我也不知道如何修复这个问题@PhaniKumarM你还能帮忙吗？@Mr.Bungle你可以找到上面更新的代码。希望这有帮助。你也可以

var acc = document.getElementsByClassName("drop-down");

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

<script>
   var acc = document.getElementsByClassName("drop-down");

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            var panel = this.nextElementSibling;
            var maxHeight = panel.style.maxHeight;

            //Collapse all divs first
            var divs = document.getElementsByClassName("drop-down-panel");
            for (i = 0; i < divs.length; i++) {
                 divs[i].style.maxHeight = null;
            };

            if (maxHeight)
                panel.style.maxHeight = null;
            else
                panel.style.maxHeight = panel.scrollHeight + "px"; 
        }
    }
</script>

<script type="text/javascript">
   var acc = document.getElementsByClassName("drop-down");

    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            var panel = this.nextElementSibling;
            var maxHeight = panel.style.maxHeight;

            //Collapse all divs first
            var divs = document.getElementsByClassName("drop-down-panel");
            for (i = 0; i < divs.length; i++) {
                divs[i].style.maxHeight = null;
                divs[i].previousElementSibling.classList.remove("active");  //new code to remove "active" class for all headers (li tags)
            };

            this.classList.toggle("active");  //Moved this line from top

            if (maxHeight)
            {
                panel.style.maxHeight = null;
                this.classList.remove("active"); //Added this line to remove "active" class for the current header
            }
            else
                panel.style.maxHeight = panel.scrollHeight + "px"; 
        }
    } 
</script>