我可以根据元素的像素高度切换元素的内容吗？

Question

使用Bootstrap 2.3.2我以前使用切换按钮来显示和隐藏使用Collapse plugin的文本，但从我看来它只允许我显示和隐藏元素的全部内容。

我需要的是已经有170px的元素内容可见，然后当单击按钮时，它会显示元素中的其余文本 - 但我需要这样做而不添加任何其他元素，它需要基于身高。

Bootstrap有可能吗？或者如果没有，jQuery？

Answer 1

这可以使用CSS进行元素样式，然后通过Javascript：

应用类

HTML：

<div class="toggle">
your huge text here...
</div>

CSS：

.toggle{
    height:170px;
}
.open{
    height:auto;
}

和JS（使用jQuery）：

$('.toggle').on('click', function () {
    $(this).toggleClass('open');
});

当您单击.toggle时，脚本基本上会检测到什么，如果单击它，则会切换将属性.open设置为{{1}的类height。引导带有文本的元素尽可能地增长。

以下是一个工作示例：http://jsfiddle.net/8SXNZ/1/