嵌套可折疊的可見性問題

Question

`每當我展開巢狀的可折疊項目時，其父級的可見性都不會正確計算。螢幕上遺漏了一些巢狀的內容

這是處理滾動高度的 html 程式碼和 js 程式碼

// Get all collapsible buttons
const collapsibles = document.getElementsByClassName('collapsible');

// Add click event listener for each collapsible
for (let i = 0; i < collapsibles.length; i++) {
  collapsibles[i].addEventListener('click', function() {
    this.classList.toggle('active');
    const content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 'px';
    }

    // Get all nested collapsible buttons within this collapsible
    const nestedCollapsibles = content.getElementsByClassName('nested-collapsible');

    // Loop through nested collapsibles and expand or collapse them accordingly
    for (let j = 0; j < nestedCollapsibles.length; j++) {
      const nestedContent = nestedCollapsibles[j].nextElementSibling;
      if (this.classList.contains('active')) {
        if (!nestedContent.style.maxHeight) {
          nestedContent.style.maxHeight = nestedContent.scrollHeight + 'px';
          content.style.maxHeight = (parseInt(content.style.maxHeight) + nestedContent.scrollHeight) + 'px'; // Add nested collapsible's scroll height to parent collapsible's scroll height
        } else {
          nestedContent.style.maxHeight = null;
          content.style.maxHeight = (parseInt(content.style.maxHeight) - nestedContent.scrollHeight) + 'px'; // Subtract nested collapsible's scroll height from parent collapsible's scroll height
        }
      }
    }
  });
}

.active {
  color:blue;
}

<div id="HotLikeMiami">
  <div class="HLM">
    <div class="HLMRow">

      <div class="HLMTitle">
        <h1 class="sub-title">Fantastic League</h1>
      </div>
      <div class="HLMImg">
        <img src="fantasticLeague.png">
      </div>
      <div class="HLMDetails">
        <p>A 2D Top Down Shooter game which heavily focuses on Enemy AI. I have made an attempt to build this project from ground up. I have used SFML for rendering shapes and textures, the rest is made from scratch. The project involves the integration
          of complex enemy AI. A simple Data-Oriented Design approach has been followed in this project for handling different events and messages by the enemies. </p>
      </div>

      <div class="MyContibution">
        <button class="collapsible">My Contribution</button>
        <div class="ContributionContent">
          <p>Got a lot of contribution</p>
          <button class="collapsible nested-collapsible">My Contribution</button>
          <div class="ContributionContent">
            <p>1. This process involves the development and integration of states like Game Menu, Splash Screen, InGame, Game Over etc states. These states are fetched with delta time which is calculated from the Game Loop. ​ 2. This stage also includes
              the development of Asset Manager, Input Manager etc</p>
          </div>

          <button class="collapsible nested-collapsible">My Contribution</button>
          <div class="ContributionContent">
            <p>1. This process involves the development and integration of states like Game Menu, Splash Screen, InGame, Game Over etc states. These states are fetched with delta time which is calculated from the Game Loop. ​ 2. This stage also includes
              the development of Asset Manager, Input Manager etc</p>
          </div>

          <button class="collapsible nested-collapsible">My Contribution</button>
          <div class="ContributionContent">
            <p>1. This process involves the development and integration of states like Game Menu, Splash Screen, InGame, Game Over etc states. These states are fetched with delta time which is calculated from the Game Loop. ​ 2. This stage also includes
              the development of Asset Manager, Input Manager etc</p>
          </div>

        </div>
      </div>


    </div>

  </div>
</div>```

</kbd>

我需要計算方面的幫助以及影響可見性的原因

我希望所有巢狀都是獨立的，並且每當展開時它們都會增加父級可見性的高度 這裡最後一個嵌套被剪掉：

---

Answer 1

我已經修改了您的程式碼，以便能夠在動態高度和回應能力下正常工作。

先檢查一下您是否正在展開或折疊。我們可以透過取得 classList.toggle 的結果來弄清楚這一點，如果新增了類，則為 true，如果刪除，則為 false。 p>

我在每個 ContributionContent 內部新增了一個包裝器。此包裝器將負責計算內部內容的總高度。這是必要的，因為 ContributionContent 的高度會波動。

監聽 transitionend 事件，將最大高度設為 none。僅當手風琴展開時才設置高度。關閉 0px 時應予以尊重。

由於展開時最大高度設定為none，因此我們必須使用雙重請求動畫影格（Double RAF）才能先設定高度，然後再轉換到0px關閉時。這是一種在渲染發生後執行任務的（hacky）技術。請參閱有關 Double RAF 的此帖子。

// Get all collapsible buttons
const collapsibles = document.querySelectorAll('.collapsible');

// Add click event listener for each collapsible.
for (const collapsible of collapsibles) {
  collapsible.addEventListener('click', function(event) {
    const button = event.target;
    const isExpanding = button.classList.toggle('active');
    const content = button.nextElementSibling;
    const wrapper = content.firstElementChild;
    
    // Get the calculated height of the wrapper.
    const { height } = wrapper.getBoundingClientRect();
    content.style.maxHeight = height 'px';
    
    // Remove max height after an exapnding transition.
    content.addEventListener('transitionend', () => {
      if (isExpanding) {
        content.style.maxHeight = 'none';
      }
    }, { once: true });
    
    // Hack to force a closing transition.
    if (!isExpanding) {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          content.style.maxHeight = '0px';
        });
      });
    }
  });
}

.active {
  color: blue;
}

.collapsible * {
  display: grid; /* This forces the wrapper to account for the margins. It avoids a jump. */
  overflow: hidden;
  transition: max-height 500ms ease-out;
}

  

    


      

        
Fantastic League
      
      

        
      
      

        
A 2D Top Down Shooter game which heavily focuses on Enemy AI. I have made an attempt to build this project from ground up. I have used SFML for rendering shapes and textures, the rest is made from scrves. integration
          of complex enemy AI. A simple Data-Oriented Design approach has been followed in this project for handling different events and messages by the enemies. 
      

        ＃＃＃我的貢獻＃＃＃
        
          
            
貢獻很多

            
            

              ＃＃＃我的貢獻＃＃＃
              
                

                  1。這個過程涉及遊戲選單、啟動畫面、遊戲中、遊戲結束等狀態的開發和整合。這些狀態是透過從遊戲循環計算得出的增量時間來獲取的。 2.該階段還包括
                    資源管理器、輸入管理器等的開發
                

              

            


            
              ＃＃＃我的貢獻＃＃＃
              
                
                  
1。這個過程涉及遊戲選單、啟動畫面、遊戲中、遊戲結束等狀態的開發和整合。這些狀態是透過從遊戲循環計算得出的增量時間來獲取的。 2.該階段還包括
                    資源管理器、輸入管理器等的開發

                
              
            


            

              ＃＃＃我的貢獻＃＃＃
              

                
                  
1。這個過程涉及遊戲選單、啟動畫面、遊戲中、遊戲結束等狀態的開發和整合。這些狀態是透過從遊戲循環計算得出的增量時間來獲取的。 2.該階段還包括
                    資源管理器、輸入管理器等的開發
                
              

            

          
        

      


    


  




 作為結束語。W3Schools 有很多很好的例子，但它們已經過時了。在尋找示例時，請了解他們的年齡以及他們是否使用最新的做法。