javascript - 是否可以在不影响相邻元素的情况下在显示内联 block 上创建显示/隐藏？

Question

我已经为我遇到的问题创建了一个演示:http://jsbin.com/omomit/2

当您点击显示/隐藏链接时，您会看到隐藏的文本出现。我想要修复的行为是它如何下推内容的第一行和第二行，而不仅仅是它所在的父容器。

换句话说，如果你标记每个列表项，它看起来像这样:

A B (<---这是一个假行，因为它没有被编程为一行)
CD

当我点击 A 的开关时，它看起来像这样(H 代表隐藏内容):

A B
H _
CD

D 已被推低，这不应该发生。相反，我希望它是这样的:

A B
H D
C

我知道我可以使用 float 来解决这个问题，但我不想使用 float 的原因是因为这些列需要模拟一个表格，这样无论每个伪列模块的高度如何，它们都排成一行假行。至关重要的是，每个伪行从上到下相互对齐，这就是为什么我也使用 vertical-align set to top。

是否可以拥有这个切换脚本功能，以便它只影响正在使用它的父容器？

Answer 1

我不是 100% 确定您的要求，但如果您在绝对定位的元素内显示/隐藏内容，它不会影响布局。

尝试将这些 CSS 属性添加到您的 .hiddentoggle 选择器中:

.hiddentoggle {
  display:none; // you already had this there
  background: lightBlue;
  left: 0;
  padding: 0 10px 10px;
  position: absolute;
  top: 100%;
  z-index: 1;
}

更新:

根据您的新信息，我很好奇您为什么不想使用 float 。我也很好奇你所说的“假行”是什么意思。

无论哪种方式，如果您只希望 C 框在显示 A 内容时向下移动，实现这一点的唯一方法是将 A 和 C 包装在一个元素中。该元素不必 float ，它也可以是 display:inline-block，但是无论您决定如何布局它，您都需要制作某种“列”以获得您想要的效果。