0

我在我们的 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';
    } 
}

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

4

3 回答 3

2

不要设置高度以便显示整个内容，而是删除具有最大高度/溢出集的类。

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

于 2012-08-01T19:22:52.293 回答
2

无需将高度设置为固定值，只需将其设置为auto，div 将扩展以适应内容：

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

（在 jsfiddle.net 上的演示）。

更新：还可以考虑将您的内联 JS ( href="javascript:Tog()") 替换为适当的事件侦听器，正如Bergi 所建议的那样。

于 2012-08-01T19:23:46.210 回答
0

这是我在评论中所说的一个工作示例。默认情况下，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,' ');
  }
}
于 2012-08-01T19:22:36.877 回答