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

Question

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

CSS

ul {position: fixed;}

li {
    text-align: left;
    display: block;
    text-decoration: none;
}

li.drop-down {
    cursor: pointer;
    transition: 0s;
}

div.drop-down-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

a.panel {
    text-align: left;
    display: block;
    text-decoration: none;
}

HTML

<ul>
<li class="drop-down">Header 1</li>
<div class="drop-down-panel">
    <a class="panel" href="#link1">Link 1</a>
    <a class="panel" href="#link2">Link 2</a>
</div>
<li class="drop-down">Header 2</li>
<div class="drop-down-panel">
    <a class="panel" href="#link3">Link 3</a>
</div>
<li class="drop-down">Header 3</li>
<div class="drop-down-panel">
    <a class="panel" href="#link4">Link 4</a>
    <a class="panel" href="#link5">Link 5</a>
</div>
</ul>

JS

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";
    } 
  }
}

Answer 1

希望对您有所帮助:

<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>

根据@Mr. 的评论更新了代码。捆绑

<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>