javascript - 绘制后避免重排 css3 列

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