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

Question

使用Bootstrap 2.3.2我之前使用了一个切换按钮来使用Collapse 插件显示和隐藏文本，但据我所见，它只允许我显示和隐藏元素的全部内容。

我需要的是已经有 170px 的元素内容可见，然后当单击按钮时，它会显示元素中的其余文本 - 但我需要在不添加任何其他元素的情况下执行此操作，它需要基于高度。

这可以通过 Bootstrap 实现吗？或者如果没有，jQuery？

score 1 · Accepted Answer

这可以使用 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属性设置为height的类auto，从而使带有文本的元素尽可能地增长。

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

1 回答 1