javascript - 有没有办法根据内容的大小(可能会有所不同)扩展 div？

Question

我在我们的 SharePoint 网站上创建了一个员工聚光灯 Web 部件，它在每次加载页面时随机选择一名员工。在聚光灯部分是从用户信息列表的“关于我”部分提取的员工简历。我正在尝试使传记可扩展，以便传记的几行最初可见，然后用户可以单击“更多”链接以展开文本以阅读其余部分。我有什么工作，但我让它跳到一个固定的高度，我希望它只扩展到 <div> 中的文本量。

div 部分:

<div id=\"expandable\" >" + Employees[randId].aboutMe +
                "</div><a href=\"javascript:Tog()\">more...</a>

风格:

#expandable { height:55px; overflow:hidden; }

一个简单的扩展脚本:

function Tog() {
    var expandable = document.getElementById('expandable');
    if (expandable.style.height == '400px') {
        expandable.style.height = '55px';
    }
    else {
        expandable.style.height = '400px';
    } 
}

有没有更好的方法来扩展内容，同时在折叠时仍然显示一些文本？

Answer 1

与其将高度设置为固定值，只需将其设置为auto，div 将扩展以适合内容:

function Tog() {
    var expandable = document.getElementById('expandable');
    if (expandable.style.height) {
        expandable.style.height = '';
    } else {
        expandable.style.height = 'auto';
    } 
}

(Demo at jsfiddle.net)。

更新:同时考虑用适当的事件监听器替换内联 JS (href="javascript:Tog()")，如 suggested by Bergi .