Question

我使用css3列在3列中显示无序列表。列表项也包含可以通过使用jQuery单击标题显示或隐藏的列表。

html看起来像（用类名来描述布局和交互）：

<ul class="i-display-in-3-columns">
  <li>
    <h3 class="slide-toggle-sibling-list-on-click">column title 1</h3>
    <ul class="i-am-initially-hidden">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </li>
  <li>
    <h3 class="slide-toggle-sibling-list-on-click">column title 2.</h3>
    <p>This can be very long with perhaps an additional paragraph as well.</p>
    <ul class="i-am-initially-hidden">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
    </ul>
  </li>
  /* some more items */
</ul>

这样可行，但每次打开或关闭子列表时，都会重新绘制列。

我希望在最初绘制之后冻结列以避免此重排，以便每个项目都保留在最初绘制的列中。

我当然可以在javascript中编写一个类似砖石的解决方案来将我的列表转换为彼此相邻显示的3个列表，但我希望有一个更简单的解决方案，最好只是在css或javascript中保存我的清单作为清单。

这可能还是我只需要重写DOM？

Answer 1

我认为你不能用CSS专栏实现这一目标。可以选择切换visibility而不是display子列表，但我假设您不希望这样。

另一种可能的CSS解决方案是使用flexbox模块（并处理浏览器支持问题）。例如，我相信这可能是你想要的（在Chrome 29上工作）：

.i-display-in-3-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.i-display-in-3-columns>li {
    flex: 1 1 200px; /* 200px is the column width */
}

<强> Demo

在绘制css3列后避免重排

1 个答案: