Question

在下面的演示中，列表项有两列，当我点击＃2列中的＃6 li时，＃5 li会跳转到＃1列。有没有办法在单击时确保列＃2中的所有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: 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？ sollution是将ul的高度改为180px

Answer 2

当订单项无法再适应受限高度（200px）时，会创建列。一旦列到达足够的项目以填充200px，下一个li将被包装到下一列。当您点击第六个li时，它会最小化第五个项目。那些物品是38px高，所以其中五个可以轻松放入第一列（38 * 5 = 190），因此第五个项目被包裹在第一列。

鉴于示例以及您要完成的任务，您可以将ul的高度降低到180px，并将三个项目保留在第二行。或者您可以在li添加顶部或底部填充或边距或固定/最小高度。

Answer 3

评论后更新。

使用Flexbox我看到1种方法，使用伪作为分隔符之一。

使用伪，只需给出前4个òrder: -1，它就位于第4个项目之后。然后我们给它100％的高度，因此它将自己强制在自己的列中。

此外，为了避免前4和后3之间的列换行，父容器必须足够高以容纳每列中的所有项目，加上一个内容（当使用 accordion <时/ em>，容器通常总是如此。

Stack snippet - Pseudo divider

＆＃13;
＆＃13;
$(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"); }); });
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 4

这是使用css中的列数计算的溶剂

demo

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

我已经从您的示例代码

中更改了此内容

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

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

将UL的css更改为：

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

为<li>添加了类＆＃34;列-break＆＃34;

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

扩展的折叠式列表项目保留在弹性列

4 个答案: