当孩子展开时，嵌套的可折叠不能正确显示其内容

Question

从https://www.w3schools.com/howto/howto_js_collapsible.asp中的代码开始，我想创建一个可折叠菜单，它也适用于嵌套内容。

 var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); }

 .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; }.active, .collapsible:hover { background-color: #555; }.collapsible:after { content: '\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; }.active:after { content: "\2212"; }.content { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; }

 <button class="collapsible">Open Collapsible</button> <div class="content"> <button class="collapsible">Open Collapsible</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="collapsible">Open Collapsible</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>

上面的代码适用于第一个（根）可折叠。

然而，当子折叠屏展开时，没有足够的空间来查看它们的内容。

只有当它们保持打开时，关闭根可折叠并重新打开它才能正确显示子内容。

我知道问题在于当根可折叠展开时，它的内容maxHeight设置为scrollHeight + "px"; ，这将是仍然关闭的可折叠子项的高度。

如何使可折叠的maxHeight在其子可折叠展开时动态变化？

Answer 1

您应该检查和修改子打开和关闭时元素的最大高度（部分代码）。

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
    // from last to first to recalculate parent height after child
    for (var j = coll.length - 1; j >= 0;  j--) {
      if (coll[j].classList.contains('active')) {
        console.log(j, coll[j].classList);
        var c2 = coll[j].nextElementSibling;
        console.log(c2);
        c2.style.maxHeight = null;
        c2.style.maxHeight = c2.scrollHeight + "px";
      }
    }
  });
}

但是如果 css 转换被禁用，上面的代码将起作用（因为 js 在转换完成之前立即触发）。

因此，如果需要转换，您可以添加超时以在转换结束后检查修改。 像这样的东西：

var coll = document.getElementsByClassName("collapsible");
var i;

var checkCollapsible = function() {
  for (var j = coll.length - 1; j >= 0;  j--) {
      if (coll[j].classList.contains('active')) {
        console.log(j, coll[j].classList);
        var c2 = coll[j].nextElementSibling;
        console.log(c2);
        c2.style.maxHeight = null;
        c2.style.maxHeight = c2.scrollHeight + "px";
      }
    }
};

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
    window.setTimeout(checkCollapsible, 200);
  });
}

https://jsfiddle.net/6yn0mewz/3/

还有一堆可用的 transitionend 事件。 所以对于 webkit，你可以使用类似（部分代码）的东西

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
   content.addEventListener('webkitTransitionEnd', checkCollapsible);
  });
}

https://jsfiddle.net/6yn0mewz/4/

请参阅CSS3 转换事件和TransitionEnd 事件未触发？ 举些例子。