javascript - 如何只显示 div 的第一行文本并在点击时展开？

Question

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

有没有一种简单的方法可以通过 css + javascript 来做到这一点？我使用 jQuery。

Answer 1

假设您不想使用任何 JavaScript 库(奇怪)。

参见: http://jsfiddle.net/JUtcX/

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';
}

---

或者，如果您想使用 JavaScript 框架，例如 jQuery ，您可以为其设置动画。

参见: http://jsfiddle.net/JUtcX/2/

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

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