jquery - 仅当内容溢出时才展开 DIV？

Question

我的概念:所以我有一个固定高度的 DIV，其中包含可变数量的内容。如果内容从框中溢出，它最初是隐藏的(通过 CSS)，但如果将鼠标悬停在框上，它应该扩展到显示内容所需的高度。

这是我到目前为止要完成的任务: http://jsfiddle.net/CvhkM/649/

问题是，正如您所看到的，jquery 在这两个示例 DIV 上触发，它实际上应该只在底部 div 上触发(内容超出了通过 CSS 定义的初始 div 高度)。

它也生长到定义的高度(300px)，有没有办法检测它应该生长到的确切高度？

更新:找到解决方案--> 我把它留在了 JSFIDDLE 上:http://jsfiddle.net/hQkFH/3/

Answer 1

您可以使用两个类。一种是折叠状态:

div.collapsed {
    height: 50px;
    overflow: hidden;
}

另一个用于展开状态:

div.expanded {
    min-height: 50px;
}

如果将鼠标指针移到 DIV 上，则会删除 collapsed 类并添加 expanded 类。

技巧是删除显式设置的高度并使用 min-height:它将很好地扩展长文本，但对短文本没有影响。这样您就不需要区分有溢出和没有溢出的情况。