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

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 に移行する必要があります。これは、レンダリングが行われた後にタスクを実行する (ハックな) テクニックです。 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 には優れた例が数多くありますが、すでに期限を過ぎていることはよく知られています。