Isu keterlihatan boleh lipat bersarang

Question

` Setiap kali saya mengembangkan yang boleh dilipat bersarang, keterlihatan induknya tidak dikira dengan betul. Beberapa kandungan bersarang tiada dari skrin

Ini ialah kod html dan kod js untuk mengendalikan ketinggian skrol

// 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>

Saya memerlukan bantuan dengan pengiraan dan perkara yang mempengaruhi keterlihatan

Saya mahu semua sarang menjadi bebas dan mereka meningkatkan ketinggian keterlihatan induk apabila berkembang Di sini sarang terakhir terputus:

---

Answer 1

Saya telah mengubah suai kod anda untuk berfungsi dengan betul dengan ketinggian dinamik dan responsif.

Periksa dahulu sama ada anda mengembang atau runtuh. Kita boleh dapatkan melalui classList.toggle 的结果来弄清楚这一点，如果添加了类，则为 true，如果删除，则为 false。 p>

Ketinggian saya berubah-ubah dengan setiap ContributionContent 内部添加了一个包装器。该包装器将负责计算内部内容的总高度。这是必需的，因为 ContributionContent.

Bersikap hormat semasa memantau transitionend 事件，将最大高度设置为 none。仅当手风琴展开时才设置高度。关闭 0px.

Memandangkan ketinggian maksimum ditetapkan kepada none apabila dikembangkan, kita perlu menggunakan Bingkai Animasi Permintaan Berganda (RAF Berganda) untuk menetapkan ketinggian dahulu dan kemudian beralih kepada 0px apabila ditutup. Ini adalah teknik (godam) yang melaksanakan tugas selepas pemaparan telah berlaku. Lihat siaran ini tentang 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. 
      

      

        My Contribution
        

          

            
Got a lot of contribution
            
            

              My 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
                
              
            

            

              My 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
                
              
            

            

              My 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
                
              
            

          
        
      

    

  

Sebagai kesimpulan. W3Schools mempunyai banyak contoh hebat, tetapi mereka terkenal ketinggalan zaman. Apabila mencari contoh, ketahui berapa umur mereka dan sama ada mereka menggunakan amalan terkini.