在按鈕單擊時增加彈性項目的大小

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）一次只展開一個flex-item;或者（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>