Question

我在SharePoint网站上创建了一个员工聚光灯webpart，随着每个页面加载随机选择一名员工。在聚光灯部分是关于从用户信息列表的“关于我”部分提取的员工的生物。我试图使它生物可扩展，以便生物的几行可见，然后用户可以点击“更多”链接以扩展文本以阅读其余部分。我有什么工作，但我把它跳到一个固定的高度，我希望它只扩展到<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

不要设置高度以便显示整个内容，而是删除具有max-height / overflow set的类。

<强> HTML

<div id="content" class="collapsed">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>

<强> CSS

div#content{ border: 1px solid black; cursor: pointer;}

div.collapsed{
     max-height: 40px;
    overflow:hidden;
}

<强>的JavaScript

var cont = document.getElementById("content");
cont.onclick = function() {
    var newClass = (cont.className==="collapsed") ? "" : "collapsed";
    cont.className = newClass;        
};

JavaScript是一个基本示例，最好使用添加/删除类库，这样您就可以拥有多个类。

示例

JSFiddle

Answer 2

不要将高度设置为固定值，只需将其设置为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。

Answer 3

这是我在评论中所说的working example。默认情况下，div占用其内容所需的任何空间。您可以通过将short类添加到元素来将其限制为您的维度。切换功能只是添加和删除此类。

HTML

<div id="expandable" class="short">Content here</div>
<a href="#" onclick="toggle()">more...</a>

CSS

.short {
  height: 200px;
  overflow: hidden;
}

JS

function toggle() {
  var elem = document.getElementById("expandable");

  if(hasClass(elem, "short"))
    removeClass(elem, "short");
  else
    elem.className = elem.className + " short";
}

//These functions from http://stackoverflow.com/a/2155755/219118
function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}

有没有办法根据内容的大小（可能会有所不同）扩展div？

3 个答案: