我只想显示一个换行文本 block 的第一行,然后在单击时显示整个 block 。另外,我想知道如何在第二次点击时将其切换回紧凑的单行版本。
有没有一种简单的方法可以通过 css + javascript 来做到这一点?我使用 jQuery。
最佳答案
假设您不想使用任何 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);
});
关于javascript - 如何只显示 div 的第一行文本并在点击时展开?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6972728/