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

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

您可能只想将类添加到单击的flex-item中，将其宽度设置为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>