我只想显示包装文本块的第一行,然后在单击时显示整个块。另外,我想知道如何在第二次单击时将其切换回紧凑的单行版本。
有没有简单的方法可以通过CSS + JavaScript做到这一点?我使用jQuery。
假设您不想使用任何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); });