javascript - Javascript嵌套可折叠div

Question

我正在创建一个可折叠的 div，其中嵌套了另一个可折叠的 div：

<button class="collapsible">Expand First Panel</button>

<div class="firstPanel">
    <div class="fistPanelContent"> ••• </div>
        
    <button>Expand Second Panel</button>

    <div class="secondPanel">
        Content of the second panel
    </div>
</div>

单击第一个按钮时，firstPaneldiv 应展开，单击嵌套的第二个按钮时，secondPaneldiv 应展开。

overflow: hidden;我已经设法通过使用和脚本来更改 div 的最大高度来实现单个扩展 div ：

<script>
var allCollapsibles = document.getElementsByClassName("collapsible");

// Iterate through the collapsibles
var index;
for (index = 0; index < allCollapsibles.length; index++) {

    // Add expansion toggle
    allCollapsibles[index].addEventListener("click", function() {
        // Set max height for collapsible element
        var expandableContent = this.nextElementSibling;
        if (expandableContent.style.maxHeight) {
            expandableContent.style.maxHeight = null;
        } else {
            expandableContent.style.maxHeight = expandableContent.scrollHeight + "px";
        }
    });
}
</script>

...但这不适用于第二个扩展 div，因为我已经设置了第一个 div 的最大高度

我怎样才能让第二个 div 扩展，而它在第一个 div 内？

标签： javascripthtmlcss

Answer 1

这是您的标记的解决方案。只需添加和删除一个类，show而不是沿着道路进行高度计算，这要简单得多。show然后，您可以根据项目是否已具有该类来添加或删除该类。使用 CSS，您可以隐藏或显示项目。

var allCollapsibles = document.querySelectorAll('.collapsible');
allCollapsibles.forEach( item => {
  item.addEventListener("click", function() {
     if(this.nextElementSibling.classList.contains('show')) {
       this.nextElementSibling.classList.remove('show')
     } else {
       this.nextElementSibling.classList.add('show')
     }
  });
});

.firstPanel,
.secondPanel {
  display: none;
}

.firstPanel.show,
.secondPanel.show {
  display: block;
}

<button class="collapsible">Expand First Panel</button>
<div class="firstPanel">
    <div class="fistPanelContent"> ••• </div>
        
    <button class="collapsible">Expand Second Panel</button>

    <div class="secondPanel">
        Content of the second panel
    </div>
</div>