Nested collapsible visibility issue

Question

`Whenever I expand a nested collapsible, the visibility of its parent is not calculated correctly. Some nested content is missing from the screen This is the html code and js code that handles the scroll height //Getallcollapsiblebuttonsconstcollapsibles=document.getElementsByClassName('collapsible');//Addclickeventlistenerforeachcollapsiblefor(l

P粉426906369 · Answer

I've modified your code to work properly with dynamic heights and responsiveness.

First check if you are expanding or collapsing. We can figure this out by getting the result of classList.toggle, which is true if the class was added, or false if it was removed. p>

I added a wrapper inside each ContributionContent. This wrapper will be responsible for calculating the total height of the inner content. This is required because the height of ContributionContent can fluctuate.

Listen to the transitionend event and set the maximum height to none. The height is only set when the accordion is expanded. Close 0px should be respected when closing.

Since the maximum height is set to none when expanded, we must use a Double Request Animation Frame (Double RAF) to first set the height and then transition to 0px when closed. This is a (hacky) technique that performs tasks after rendering has occurred. See this post about 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 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. 
      

        
        
          
            Got a lot of contribution
            
            
              
              
                
                  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
                
              
            

            
              
              
                
                  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
                
              
            

            
              
              
                
                  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
                
              
            

          
        
      

    

  




作为结束语。 W3Schools 有很多很好的例子，但众所周知它们已经过时了。寻找示例时，请了解他们的年龄以及他们是否使用最新的做法。

Nested collapsible visibility issue

reply all(1)I'll reply

Fantastic League