单击按钮时增加弹性项目的大小

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) 一次只扩展一个弹性项目；或（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');
    	 	
    });

.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>