ボタンのクリックでフレックスアイテムのサイズを大きくする

Question

flex-itemをクリックすると、その下の完全な行のサイズに拡張する必要があるような機能を追加したいとします。基本的にはクリックするとサイズが大きくなり、もう一度クリックすると元のサイズに戻ります。

次のelementsは、同じサイズのままでなければならず、展開された後に次の行に移動する必要があります。flex-itemと同じプロパティflex-boxに従います。 flex-itemsはクリック時に展開され、別のクリックで同じサイズに戻ることができるクリック可能なelementsでなければなりません。

私はこれを理解することができず、私はフロントエンドの技術に慣れていません。

$('#clickMe').click(function() { 
 
    $('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar')); 
 
    $(this).insertAfter($('[class^="flex-item"]').last()); 
 
});

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    margin-right: 15px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    
 
} 
 
ul li{ 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="Demosss" class="flex-container"> 
 
<!-- add LI here --> 
 
</ul> 
 

 

 
<button id="clickMe">Click Me</button>

Answer 1

あなたはクリックでtoggleクラスをすることができます。

var i = 1; // just for differentiate divs 
 
$('#clickMe').click(function() { 
 
    $('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar-'+i)); 
 
    $(this).insertAfter($('[class^="flex-item"]').last()); 
 
    i++ 
 
}); 
 

 
$(document).on('click', '.flex-item' ,function(){ 
 
    $(this).toggleClass('flexActive') 
 
})

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    margin-right: 15px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    
 
} 
 
ul li{ 
 
    display: inline; 
 
} 
 
.flexActive{ 
 
    width:auto; 
 
    display:block; 
 
    flex: 1 1; 
 
    margin-right:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="Demosss" class="flex-container"> 
 
<!-- add LI here --> 
 
</ul> 
 

 

 
<button id="clickMe">Click Me</button>

Answer 2

あなたはクリックするだけで、このクラスを切り替え、その後、100％にその幅を設定し、クリックされたフレックスアイテムにクラスを追加したい場合があります。

私は、あなたが次のことを望むかどうかわかりません：（a）一度に1つのフレックスアイテムを展開するだけです。 （b）クリックだけでフレックスアイテムを収縮させたいと思っていましたが、シナリオ（a）を私の答えに入れました。それにもかかわらず、このコード行を削除すると、シナリオ（b）に進むことができます。

$（ '。expand'）; removeClass（ 'expand'）;

$('#clickMe').click(function() { 
 
      $('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar')); 
 
      $(this).insertAfter($('[class^="flex-item"]').last()); 
 
     }); 
 
    $(document).on('click','.flex-item',function(){ 
 
     $('.expand').removeClass('expand'); 
 
     $(this).toggleClass('expand'); 
 
    \t \t 
 
    });

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    margin-right: 15px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    
 
} 
 
ul li{ 
 
    display: inline; 
 
} 
 
.expand { 
 
width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="Demosss" class="flex-container"> 
 
<!-- add LI here --> 
 
</ul> 
 

 

 
<button id="clickMe">Click Me</button>