嵌套可折疊的可見性問題

Question

`每當我展開嵌套的可折疊項目時，其父級的可見性都不會正確計算。螢幕上遺漏了一些嵌套的內容這是處理滾動高度的html程式碼和js程式碼//Getallcollapsiblebuttonsconstcollapsibles=document.getElementsByClassName('collapsible');//Addclickeventlistenerforeachcollapsiblefor(l

P粉426906369 · Answer

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

先檢查一下您是否正在展開或折疊。我們可以透過取得 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.該階段還包括
                    資源管理器、輸入管理器等的開發
                
              
            
        
      

    

  





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