當孩子展開時，嵌套的可折疊不能正確顯示其內容

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 事件未觸發？ 舉些例子。