コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
折りたたみ可能な要素を Flexbox レイアウトに挿入する方法
P粉366946380
P粉366946380 2024-03-19 23:20:59
0
2
347

画像がラップされたフレックスボックス レイアウトがあり、画像がクリックされたときに情報を表示したいと考えています。情報は、「列」を移動せずに、画像を含む行とそのすぐ下の行の間に表示される必要があります。 これは私が望むタイプの効果です: http://olmenta.altervista.org (本をクリックしたとき)。

私がやったことは次のとおりです: https://jsfiddle.net/fabhpnw9/3/

var coll = document.getElementsByClassName("rectangle");
変数 i;

for (i = 0; i < coll.length; i ) {
  coll[i].addEventListener("クリック", function() {
    this.classList.toggle("アクティブ");
    var content = this.nextElementSibling;
    if (content.style.display === "ブロック") {
      content.style.display = "なし";
    } それ以外 {
      content.style.display = "ブロック";
    }
  });
}
.flex-container {
  ディスプレイ: フレックス;
  ギャップ: 10px;
  フレックスラップ: ラップ;
  コンテンツの位置揃え: 中央;
}

.rectangle {
  幅: 200ピクセル;
  高さ: 50ピクセル;
  背景色: 赤;
  カーソル: ポインタ;
}

。文章 {
  表示: なし。
  位置: 絶対;
}
<div class="flex-container">
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="flex-item">
    <div class="rectangle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
</div>

フレックス項目のサイズ変更により「列」が移動しています。 この問題はテキストに「position:absolute」を追加することで解決できますが、そうするとテキストが次の行と競合します。 列が移動せず、テキストが次の行と競合しないようにする方法を知っていますか?

P粉366946380
P粉366946380

全員に返信(2)
P粉739942405
P粉7399424052024-03-20 14:07:10 2棟

詳細な情報開示要素すでに組み込みブラウザの オン/オフメカニズムが備わっています。したがって、これを使用して、要件に合わせて動作を変更してみてはいかがでしょうか。

基本原則は

です 

   クリック可能なコンテンツ
   

       がクリックされたときに公開したいコンテンツ

  • CSS を通じて、コンテンツをどこにどのように表示するかを制御できます。デフォルトのブロック スタイルを使用するか、フレックスボックス/グリッド レイアウトを使用するかに関係なく、コンテンツは通常のドキュメント フローの外側に配置されます。これらは通常の要素なので、基本的には何でも起こります。

  • デフォルトでは、ユーザーが他の場所をクリックしても、detail/summary は開いたままになります。 現在「公開」されているコンテンツを 自動的に閉じるには、JavaScript が必要です。

  • ユーザーは「閉じるボタン」が表示されないと混乱する傾向があるため、そこに「閉じるボタン」を追加しました。ただし、情報ボックスを閉じるには、情報ボックス内の任意の場所をクリックします。

私はこれを少しやりすぎて、サンプル サイトにできるだけ近づけようとしながら、コードを完全に無視するレスポンシブ デモを作成しました (申し訳ありません!)。該当するところにはコメントしました。不明な場合は、コメントで教えてください。

＃＃＃＃＃＃断片＃＃＃＃＃＃

// 現在の 'open' 
 要素への参照が含まれます
var currentDetail;

// すべてのグリッド セルのリストを調べます => 

document.querySelectorAll('.grid .cell').forEach(el => {

    // グリッド セルの子のリストを調べて、イベントリスナーをアタッチします
    for (el.children の子 const) {

        // プレビューの場合、情報ボックスを切り替えます
        // または、情報ボックスがすでに表示されている場合は別のボックスを開きます。
        if (child.classList.contains('preview')) {
            // このイベントは 
 'toggle' イベントの前にトリガーされます
            child.addEventListener("クリック",event => { toggleDetails(event.currentTarget.closest('.cell')) });
            // 最も近い親 .cell を検索します
        }

        // 情報ボックスの場合はそのまま閉じます。
        if (child.classList.contains('情報')) {
            child.addEventListener("クリック", イベント => { closeDetails() });
        }
    };
});

関数 toggleDetails(el) {
    if (el.open) { /* ブラウザが詳細をトリガーしようとしています 'toggle' */
        現在の詳細 = null; // すべての詳細を閉じます
    }
    else { // null ではなく、詳細が異なります
        if ((currentDetail) && (currentDetail != el)) {

            currentDetail.removeAttribute('open'); // 現在開いている詳細を閉じます
        };
        currentDetail = el; // 新しく開いた詳細を保存します
    };
};

関数 closeDetails() {
    if (currentDetail) { // 詳細を開きますか?
        currentDetail.removeAttribute('open'); // 現在開いている詳細を閉じます
        現在の詳細 = null; // すべての詳細を閉じます
    };
};
/* * { アウトライン: 1px 破線 } /* デバッグ用 */

/********************************/
/* いくつかの便利なグローバル ルール */
/********************************/
*, ::before, ::after { ボックスサイズ設定: ボーダーボックス }
/* パディングと境界線は要素の合計サイズの一部となり、マージンは一切含まれません */

html、本文{幅: 100%;最大幅: 100% }
html { スクロール動作: スムーズ }

体 {
    マージン: 未設定; /* デフォルトのマージンを無効にする */

    最小高さ: 100vh;
    行の高さ: 1.5;
    パディング: 1レム;

    オーバースクロール動作: 含む; /* これについては MDN を確認してください */
}

詳細, /* CSS デフォルトを削除 */
概要 { パディング: 0;リストスタイル: なし }

画像 {
    表示ブロック; /* 画像の下の小さな空白を削除します */
    幅: 100%; /* 全幅に伸縮します */
    アスペクト比: 1 / 1.5; /* または高さ: 自動、あなたの選択 */
    オブジェクトフィット: カバー; /* 親を塗りつぶしますが、適合しない場合はクリップします */
}

/* レスポンシブなフォント サイズ設定 */
/* 線形方程式を使用します y=mx b => y=0.00625x 12 (320,14)(1280,20) */
html { フォントサイズ: calc(0.625vmin 0.75rem) }
本文 { font-size: 1rem }

/***************************************/
/* デモ、基本レイアウト - モバイルファースト */
/***************************************/
.grid {
    ディスプレイ: フレックス;フレックスフロー: 行の折り返し;
    コンテンツの位置揃え: 中央;
    ギャップ: 1レム;
}

.cell {
    /* これらのプロパティをいじります */
    フレックスグロー: 1; /* [オプション] */
    最小幅: min(12rem、100%); /* 希望の幅に設定します */

    カーソル: ポインタ;
}

.cell .preview { ボーダー: 1px 単色黒 }.cell .information {
    オーバーフロー: 自動;オーバースクロール動作: 含む;

    位置: 固定; /* ビューポート内 */
    z インデックス: 99999; /* 本文コンテンツ上に */
    インセット: 0%; /* 全画面表示 */

    ギャップ: 1レム;
    パディング: 4レム 1レム 1レム;

    背景色: hsl(0,0%,14%);色: hsl(0,0%,90%);

    カーソル: デフォルト;
}

/****************************/
/* いくつかの応答動作 */
/****************************/
@media all and (min-width: 361px) {
    .cell .information {
        ディスプレイ: フレックス;フレックスフロー: 行の折り返し;コンテンツの位置揃え: 中央;

        インセット: 30% 0% 0%; /* % 側面から留まります */
        パディング: 4レム;
        不透明度: 0.985;
    }

    .cell .information img {
        幅: 自動;最大幅: min(360px, 100%);
    }
}
/* ディト */
@media all and (min-width: 721px) {
    .cell {
        フレックスグロー: 0; /* [オプション] */
    }
}
/* コンテンツの拡大を許可します。360 ピクセル デバイスにのみ関連します */
/* として  * { flex: 1 }

/***************************************************************/
/* .information 'x' 閉じるボタンの動作 */
/***************************************************************/
.cell .information .close {
    位置: 絶対;上: 0.75レム;右: 1.25レム。
    フォントサイズ: 2em;フォントスタイル: 通常;

    カーソル: ポインタ;
}
.cell .information .close::after { content: "\2715" }
.cell .information .close:hover::after { content: "\2716" }

    

        
        

            
            

                
素敵な説明

                

                    Lorem ipsum dolor sit amet, id pri eirmod dolores pondum.それぞれのケースごとに、所有する図書館、エロス・マグナ・ウス No. Rebum dicatlegere 座ってください。 Mentitum consequat eam et. Omnis quaeque blandit mei in. Ius debet vulputate ut。
                

            

            
        

    

 
    

        
        

            
            

                
素敵な説明

                

                    Lorem ipsum dolor sit amet, id pri eirmod dolores pondum.それぞれのケースごとに、所有する図書館、エロス・マグナ・ウス No. Rebum dicatlegere 座ってください。 Mentitum consequat eam et. Omnis quaeque blandit mei in. Ius debet vulputate ut。
                

            

            
        

 
    

        #
        

            
            

                
素敵な説明

                

                    痛み自体、特にウェイトの痛みは非常に重要です。チーズがそうなる本によって、エロスは大きな権利ではありません。彼はそれを読むべきだと言います。彼はそのことについて彼女に嘘をついた。すべてが私を喜ばせます。スーパーヒーローになるのが正しいはずだ。
                

            

            
        

    

 
    

        #
        

            
            

                
素敵な説明

                

                    痛み自体、特にウェイトの痛みは非常に重要です。チーズがそうなる本によって、エロスは大きな権利ではありません。彼はそれを読むべきだと言います。彼はそのことについて彼女に嘘をついた。すべてが私を喜ばせます。スーパーヒーローになるのが正しいはずだ。
                

            

            
        

    

 
    

        #
        

            
            

                
素敵な説明

                

                    痛み自体、特にウェイトの痛みは非常に重要です。チーズがそうなる本によって、エロスは大きな権利ではありません。彼はそれを読むべきだと言います。彼はそのことについて彼女に嘘をついた。すべてが私を喜ばせます。スーパーヒーローになるのが正しいはずだ。
                

            

            
        

    

 
    

        #
        

            
            

                
素敵な説明

                

                    痛み自体、特にウェイトの痛みは非常に重要です。チーズがそうなる本によって、エロスは大きな権利ではありません。彼はそれを読むべきだと言います。彼はそのことについて彼女に嘘をついた。すべてが私を喜ばせます。スーパーヒーローになるのが正しいはずだ。
                

            

            
        

 
    

        #
        

            
            

                
素敵な説明

                

                    痛み自体、特にウェイトの痛みは非常に重要です。チーズがそうなる本によって、エロスは大きな権利ではありません。彼はそれを読むべきだと言います。彼はそのことについて彼女に嘘をついた。すべてが私を喜ばせます。スーパーヒーローになるのが正しいはずだ。
                

            

            
        

    

 
    

        #
        

            
            

                
素敵な説明

                

                    痛み自体、特にウェイトの痛みは非常に重要です。チーズがそうなる本によって、エロスは大きな権利ではありません。彼はそれを読むべきだと言います。彼はそのことについて彼女に嘘をついた。すべてが私を喜ばせます。スーパーヒーローになるのが正しいはずだ。
                

            

            
        

    

 
    

        #
        

            
            

                
素敵な説明

                

                    痛み自体、特にウェイトの痛みは非常に重要です。チーズがそうなる本によって、エロスは大きな権利ではありません。彼はそれを読むべきだと言います。彼はそのことについて彼女に嘘をついた。すべてが私を喜ばせます。スーパーヒーローになるのが正しいはずだ。
いいねを押す +0
返信を追加
P粉041881924
P粉0418819242024-03-20 09:09:13 1棟

.flex-item の active クラスの切り替えに切り替えると、アクティブな .flex-item に高さを追加できます。 # #.text スペースを空けてください。

注:

.text 要素を正しく配置するには、.flex-item (または position: static) を配置しないことが重要です。それ以外の場合、.text の left: 0 は親の .flex-item の左側になります。

これは実際の例のスニペットです:

var coll = document.getElementsByClassName("rectangle"); 変数 i; for (i = 0; i 
 x.classList.remove('active'))
    this.parentElement.classList.add("アクティブ");
  });
}
.flex-container { ディスプレイ: フレックス; ギャップ: 10px; フレックスラップ: ラップ; コンテンツの位置揃え: 中央; } .flex-item { 幅: 200ピクセル; } .rectangle { 幅: 200ピクセル; 高さ: 50ピクセル; 背景色: 赤; カーソル: ポインタ; 位置: 相対的; } .flex-item.active { 高さ: 155ピクセル; } .flex-item:not(.active) .text { 表示: なし。 } 。文章 { 位置: 絶対; 左: 0px; 幅: 100%; パディング: 10px; テキスト整列: 中央; マージントップ: 5px; 高さ: 100ピクセル; 背景: グレー; 色: #fff; ボックスのサイズ設定: ボーダーボックス; } /*ツールチップのスタイル*/ .flex-item.active .rectangle::after { コンテンツ： ''; 境界線: 実線 10 ピクセル透明; border-bottom: 10px グレーの実線。 位置: 絶対; 下: -5px; 左: calc(50% - 5px); }


  

    



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit

  

  

    



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit

  

  

    



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit

  

  

    



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit

  

  

    



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit

  

  

    



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit

  

  

    



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit

  

  

    



    
Lorem ipsum dolor sit amet, consectetur adipiscing elit

  









                            

                                 
                                いいねを押す +0
                                

                                    返信を追加
                                    
                                

                            

                                                            
                            
                            

                                
    
                                    
                                


                            



                        

                    


                

                

                



                

            

        


        
        

            
            

                

                    
人気のトピック

                    詳細>
                    
                

                


                    
                

 
            

            


                

                    
 人気の記事 

                

                

                    
                

            

            

                

                    
人気のチュートリアル

                    詳細>
                    
                

                

                    

                        
関連するチュートリアル 

                        
人気のおすすめ

                        
最新のコース

                    

                    
                    
                    
                

                
            

            

                

                    
最新のダウンロード

                    詳細>
                    
                


                                

                

                    

                        
ウェブエフェクト 

                        
公式サイト

                        
サイト素材

                        
フロントエンドテンプレート