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

【问题标题】：Can I Toggle content of Element based on pixel height of element?我可以根据元素的像素高度切换元素的内容吗？
【发布时间】：2013-08-21 13:04:33
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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，将属性height 设置为auto，引导元素带有文本尽可能大。

【讨论】：