ネストされた折りたたみ可能な可視性の問題

Question

` ネストされた折りたたみ可能オブジェクトを展開すると、その親の可視性が正しく計算されません。一部のネストされたコンテンツが画面に表示されません

これはスクロールの高さを処理する html コードと js コードです

リーリー リーリー リーリー

計算と可視性に影響するものについてサポートが必要です

すべてのネストを独立させ、展開するたびに親の可視性の高さを増やしたいと考えています。 ここでは最後のネストが切り取られています:

---

Answer 1

動的な高さと応答性で適切に動作するようにコードを変更しました。

まず、展開しているか折りたたんでいるかを確認してください。これは、classList.toggle の結果を取得することでわかります。クラスが追加された場合は true、クラスが削除された場合は false になります。 p>

各 ContributionContent 内にラッパーを追加しました。このラッパーは、内部コンテンツの 合計高さ を計算します。 ContributionContent の高さは変動する可能性があるため、これが必要です。

transitionend イベントをリッスンし、最大高さを none に設定します。高さはアコーディオンが展開されている場合にのみ設定されます。閉じるときは、0px を尊重する必要があります。

展開時の最大高さは none に設定されるため、ダブル リクエスト アニメーション フレーム (Double RAF) を使用して最初に高さを設定し、閉じたときに 0px に移行する必要があります。これは、レンダリングが行われた後にタスクを実行する (ハックな) テクニックです。 Double RAF については、この投稿を参照してください。

// 折りたたみ可能なボタンをすべて取得します
const collapsibles = document.querySelectorAll('.collapsible');

// 各折りたたみ可能なクリック イベント リスナーを追加します。
for (const Collapsesible of Collapsesible) {
  collapsible.addEventListener('click', function(event) {
    const ボタン = イベント.ターゲット;
    const isExpanding = button.classList.toggle('active');
    const content = button.nextElementSibling;
    const ラッパー = content.firstElementChild;
    
    // ラッパーの計算された高さを取得します。
    const { 高さ } =wrapper.getBoundingClientRect();
    content.style.maxHeight = 高さ 'px';
    
    // 拡大遷移後の最大高さを削除します。
    content.addEventListener('transitionend', () => {
      if (isExpanding) {
        content.style.maxHeight = 'なし';
      }
    }, { 1 回: true });
    
    // ハックして終了遷移を強制します。
    if (!isExpanding) {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          content.style.maxHeight = '0px';
        });
      });
    }
  });
}

＃＃＃。アクティブ { 青色; } .collapsible * { display: Grid; /* これにより、ラッパーにマージンが考慮されるようになり、ジャンプが回避されます。 */ オーバーフロー: 非表示; トランジション: 最大高さ 500 ミリ秒のイーズアウト。 }

  

    


      

        
ファンタスティックリーグ

      
      
        

      
      
        
敵 AI に重点を置いた 2D トップダウン シューティング ゲームです。このプロジェクトを一から構築しようとしました。形状とテクスチャのレンダリングに SFML を使用し、残りは最初から作成しました。このプロジェクトには、統合
          このプロジェクトでは、敵によるさまざまなイベントやメッセージを処理するために、シンプルなデータ指向設計アプローチが採用されています。
      

        私の貢献
        

          

            
多くの貢献をいただきました
            
            

              私の貢献
              

                

                  ＃＃＃１。このプロセスには、ゲーム メニュー、スプラッシュ スクリーン、インゲーム、ゲーム オーバーなどの状態の開発と統合が含まれます。これらの状態は、ゲーム ループから計算されるデルタ時間で取得されます。 2. このステージには以下も含まれます
                    アセットマネージャー、インプットマネージャーなどの開発

                
              
            

            
              
私の貢献
              
                

                  ＃＃＃１。このプロセスには、ゲーム メニュー、スプラッシュ スクリーン、インゲーム、ゲーム オーバーなどの状態の開発と統合が含まれます。これらの状態は、ゲーム ループから計算されるデルタ時間で取得されます。 2. このステージには以下も含まれます
                    アセットマネージャー、インプットマネージャーなどの開発

                

              
            

            
              
私の貢献

              
                
                  ＃＃＃１。このプロセスには、ゲーム メニュー、スプラッシュ スクリーン、インゲーム、ゲーム オーバーなどの状態の開発と統合が含まれます。これらの状態は、ゲーム ループから計算されるデルタ時間で取得されます。 2. このステージには以下も含まれます
                    アセットマネージャー、インプットマネージャーなどの開発

                

              

            

          
        
      

    

  




 W3School には優れた例が数多くありますが、すでに期限を過ぎていることはよく知られています。