扩展了手风琴列表项以保留在flex列中

Question

在下面的演示中，有两列带有列表项，当我单击＃2列中的＃6 li时，＃5 li跳到了＃1列。 单击时，是否有办法确保所有3个列表保留在＃2列中？

 $(function() { // (Optional) Active an item if it has the class "is-active" $(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown(); $(".accordion > .accordion-item").click(function() { // Cancel the siblings $(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp(); // Toggle the item $(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out"); }); }); 

 ul { display: flex; flex-flow: wrap column; height: 200px; /*to change height to split ul list*/ border: solid 1px red; } .accordion { list-style: none; } .accordion-thumb { margin: 0; padding: 5px; cursor: pointer; font-weight: normal; } .accordion-thumb::before { content: ""; display: inline-block; height: 7px; width: 7px; -webkit-transition: -webkit-transform 0.2s ease-out; transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; } .accordion-panel { margin: -10px; display: none; margin-left: 12px; padding-bottom: 15px; } body { line-height: 1.5; margin: 0 auto; max-width: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="accordion"> <li class="accordion-item is-active"> <h3 class="accordion-thumb">1.) list one</h3> <p class="accordion-panel">1111111111 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">2.) list two</h3> <p class="accordion-panel">2222222222 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">3.) list three</h3> <p class="accordion-panel">3333333333 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">4.) list four </h3> <p class="accordion-panel">4444444444 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">5.) list five</h3> <p class="accordion-panel">5555555555 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">6.) list six</h3> <p class="accordion-panel">6666666666 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">7.) list seven</h3> <p class="accordion-panel">7777777777 </p> </li> </ul> 

Answer 1

一个hacky？ 解决方法是将ul的高度更改为180px

Answer 2

当订单项不再适合限制高度（200px）时，将创建列。 一旦该列达到足以填满200px的项目，下一个li被包装到下一个列。 当您单击第六个li ，它将最小化第五个项目。 这些项目的高度为38px，因此其中五个可以轻松放入第一列（38 * 5 = 190），因此将第五个项目包装在第一列中。

给定示例和您要完成的任务，您可以将ul的高度减小到180px并将这三项保留在第二行中。 或者，您可以在li添加顶部或底部填充或边距或固定/最小高度。

Answer 3

评论后更新。

使用Flexbox我看到一种方法，通过使用伪方法之一作为分隔线。

使用伪òrder: -1 ，只需给出前4个òrder: -1就可以将其定位在òrder: -1 。 然后我们给它100％的高度，这样它将迫使自己进入自己的列中。

此外，为了避免在前4个和后3个之间进行列换行，父容器必须足够高以容纳每一列中的所有项目，再加上一个容器的内容（使用手风琴时 ，容器通常始终是）。

堆栈片段-伪分隔符

 $(function() { // (Optional) Active an item if it has the class "is-active" $(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown(); $(".accordion > .accordion-item").click(function() { // Cancel the siblings $(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp(); // Toggle the item $(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out"); }); }); 

 ul { display: flex; flex-flow: wrap column; height: 250px; /*to change height to split ul list*/ border: solid 1px red; } .accordion { list-style: none; } .accordion::before { content: ''; height: 100%; width: 0; } .accordion-item:nth-child(-n+4) { order: -1; } .accordion-thumb { margin: 0; padding: 5px; cursor: pointer; font-weight: normal; } .accordion-thumb::before { content: ""; display: inline-block; height: 7px; width: 7px; -webkit-transition: -webkit-transform 0.2s ease-out; transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; } .accordion-panel { margin: -10px; display: none; margin-left: 12px; padding-bottom: 15px; } body { line-height: 1.5; margin: 0 auto; max-width: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="accordion"> <li class="accordion-item is-active"> <h3 class="accordion-thumb">1.) list one</h3> <p class="accordion-panel">1111111111<br>3333333333<br>3333333333 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">2.) list two</h3> <p class="accordion-panel">2222222222<br>3333333333<br>3333333333 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">3.) list three</h3> <p class="accordion-panel">3333333333<br>3333333333<br>3333333333 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">4.) list four </h3> <p class="accordion-panel">4444444444<br>3333333333<br>3333333333 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">5.) list five</h3> <p class="accordion-panel">5555555555<br>3333333333<br>3333333333 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">6.) list six</h3> <p class="accordion-panel">6666666666<br>3333333333<br>3333333333 </p> </li> <li class="accordion-item"> <h3 class="accordion-thumb">7.) list seven</h3> <p class="accordion-panel">7777777777<br>3333333333<br>3333333333 </p> </li> </ul> 

Answer 4

这是在CSS中使用列数的解决方案

演示

它确实以不同的方式解决了您的问题

我已经从您的示例代码中更改了此设置

添加了一个<li>在第四和第五之间<li>

<li class="column-break">&nbsp;</li>

将UL的CSS更改为：

    ul {
  height: 200px;
  border: solid 1px red;
  column-count: 2;
}

为<li>添加了带有“ column-break”类的css

.column-break {
  break-after: column;
}