如何仅显示div的第一行文本并在单击时展开？

Question

我只想显示包装文本块的第一行，然后在单击时显示整个块。另外，我想知道如何在第二次单击时将其切换回紧凑的单行版本。

有没有简单的方法可以通过CSS + JavaScript做到这一点？我使用jQuery。

Answer 1

假设您不想使用任何JavaScript库（这很 奇怪 ）。

HTML：

<div id="content"></div>

CSS：

#content {
    border: 1px solid red;
    height: 1em;
    padding: 2px; /* adjust to taste */
    overflow: hidden    
}

JavaScript：

document.getElementById("content").onclick = function() {
    this.style.height = 'auto';
}

另外，如果您想使用jQuery之类的JavaScript框架，则可以对其进行动画处理。

$('#content').click(function() {
    var reducedHeight = $(this).height();
    $(this).css('height', 'auto');
    var fullHeight = $(this).height();
    $(this).height(reducedHeight);

    $(this).animate({height: fullHeight}, 500);
});