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课程。

＆＃13;

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')
})

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可能只想在单击的flex-item中添加一个类，将其宽度设置为100％，然后在单击时切换此类。

现在我不知道你是否想要：（a）一次扩展一个flex项目;或者（b）你只想在点击时收回弹性项目，但我在答案中制作了方案（a），因为这可能更有意义。不过，你可以通过删除这行代码来实现方案（b）：

$（ '膨胀。 '）removeClass（' 扩大'）;

$('#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>

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

2 个答案: