3

我正在使用 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？

4

1 回答 1

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

于 2013-09-10T19:18:49.537 回答