html - 仅显示一个元素直到某个深度，直到展开

Question

这似乎与 bootstrap 提供的手风琴功能不同。

举个例子，让我们现在就以“如何格式化”信息为例。我希望它只显示 X 像素深，然后停止直到展开。所以它可能看起来像：

在此处输入图像描述

然后，一旦扩大，

在此处输入图像描述

我碰巧正在使用引导程序。是否有引导本机或其他 HTML 解决方案来创建这种体验？

假设我只想展示的东西是单个元素，例如图像，而不是一系列文本。这意味着像 min-height:50px 和 overflow:hidden 这样的解决方案将不起作用，因为它只会隐藏整个图像而不是其中的一部分。

score 0 · Accepted Answer

高度和溢出的组合以及类的切换应该在这里起作用。

箭头的单击绑定到以下函数：

function expandCollapse() {
    $("#container").toggleClass("expanded");
    $(".glyphicon").toggleClass("glyphicon-arrow-down"); // Flip Arrow
}

score 0 · Accepted Answer

我们可以使用 jQuery.height()来完成知道元素的渲染高度，然后进行条件修改。

2 回答 2