我的問題是，當我展開標題2時，里面有一個子標題沒有展開它的內容。

我想我知道問題出在哪里，但不知道如何解決。

子標題在標題2里面，所以它的內容顯示在標題3的后面或下面(我想)。我希望它將header 3向下推，以顯示它自己的內容。

如果我展開子標題，然后關閉標題2，再重新打開標題2，子標題現在的行為是正確的，當標題3展開時，它會按下標題3。

我假設這與我使用的腳本有關，因為它是一個基于滾動高度的點擊函數，所以它只在我第二次點擊header 2(關閉并重新打開它)后選擇新的滾動高度，而副標題是打開的。

這里有一些參考代碼，實際上不是來自我的項目，但顯示了同樣的問題。我不知道如何解決這個問題。

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

.app {
      display: flex;
      min-height: 100vh;
    }

    .content {
      flex-grow: 1;
      padding: 50px 0 50px 75px;
    }

     .collapsible-content{
      padding: 20px 28px;
      transition: max-height 0.2s ease-out;
      background-color: none;
      float: none;
    }

    .collapsible-container {
      max-height: 0;
      width: 75%;
      overflow: hidden;
      padding: none;
      transition: max-height 0.2s ease-out;
      background-color: none;
      float: none;
     }

    .collapsible {
      background-color: rgb(218, 228, 238);
      color: rgb(84, 84, 84);
      cursor: pointer;
      padding: 18px;
      width: 75%;
      text-align: left;
      text-indent: 20px;
      letter-spacing: 1px;
      outline: none;
      font-size: 18px;
      border: 1px solid white;
      float: top;
    }

     .active, .collapsible:hover {
       background-color: rgb(175, 186, 197);
       color: white;
     }

    .collapsible:after {
       content: '\002B'; /* 'plus' symbol (+) */
       color: rgb(74, 74, 74);
       font-weight: bold;
       float: right;
       margin-left: 5px;  
     }

     .active:after {
       content: "\2212"; /* 'minus' symbol (-) */
     }

<div class="app">
         <main class="content">

          <h1>Main Title</h1>
          <button class="collapsible">Header 1</button>
            <div class="collapsible-container">
              <img class="" scr="" alt="Image 1" style="width:200px;height:200px;">
            </div>
            
          <button class="collapsible">Header 2</button>
            <div class="collapsible-container">
              <div class="collapsible-content"> Main content will be written here
              </div>
    
              <button class="collapsible">sub header</button>
                <div class="collapsible-container">
                  <img class="" scr="." alt="Image 2" style="width:200px;height:200px;">
                </div>
            </div> 
            
          <button class="collapsible">Header 3</button>
            <div class="collapsible-container">
              <img class="" scr="" alt="Image 1" style="width:200px;height:200px;">
            </div>
        </main>
     </div>

你還必須計算嵌套子元素的高度，就像這個答案所說的:如何實現嵌套折疊？

var allHeights = 0;
var contents = document.getElementsByClassName("collapsible-container");
var j;

for (j = 0; j < contents.length; j++) {
  var h = document.getElementsByClassName("collapsible-container")[j].scrollHeight;
  allHeights += h;
}

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 == allHeights + "px"){
      content.style.maxHeight = "0px";
    } else {
      content.style.maxHeight = allHeights + "px";
    }
  });
}

.app {
  display: flex;
  min-height: 100vh;
}

.content {
  flex-grow: 1;
  padding: 50px 0 50px 75px;
}

.collapsible-content {
  padding: 20px 28px;
  transition: max-height 0.2s ease-out;
  background-color: none;
  float: none;
}

.collapsible-container {
  max-height: 0;
  width: 75%;
  overflow: hidden;
  padding: none;
  transition: max-height 0.2s ease-out;
  background-color: none;
  float: none;
}

.collapsible {
  background-color: rgb(218, 228, 238);
  color: rgb(84, 84, 84);
  cursor: pointer;
  padding: 18px;
  width: 75%;
  text-align: left;
  text-indent: 20px;
  letter-spacing: 1px;
  outline: none;
  font-size: 18px;
  border: 1px solid white;
  float: top;
}

.active,
.collapsible:hover {
  background-color: rgb(175, 186, 197);
  color: white;
}

.collapsible:after {
  content: '\002B';
  /* 'plus' symbol (+) */
  color: rgb(74, 74, 74);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
  /* 'minus' symbol (-) */
}

<div class="app">
  <main class="content">

    <h1>Main Title</h1>
    <button class="collapsible">Header 1</button>
    <div class="collapsible-container">
      <img class="" scr="" alt="Image 1" style="width:200px;height:200px;">
    </div>

    <button class="collapsible">Header 2</button>
    <div class="collapsible-container">
      <div class="collapsible-content"> Main content will be written here
      </div>

      <button class="collapsible">sub header</button>
      <div class="collapsible-container">
        <img class="" scr="." alt="Image 2" style="width:200px;height:200px;">
      </div>
    </div>

    <button class="collapsible">Header 3</button>
    <div class="collapsible-container">
      <img class="" scr="" alt="Image 1" style="width:200px;height:200px;">
    </div>
  </main>
</div>