用jqury实现超出高度隐藏，点击更多显示内容效果。

Question

本帖最后由 lp234291053 于 2014-06-29 18:41:08 编辑

Answer 1

使用一个div(假如名字为d1)包起另外一个div(假如名字为d2),给d1设置高度为50px，行高也设置为50px，相对定位，溢出设置为隐藏，里面那个什么都不设置，初始化的时候判断里面那个的高度是多少，如果超过50就在d1的右上角加入更多这个绝对定位的span吧

Answer 2

<style>
.item{position:relative;width:900px;height:50px;overflow:hidden;margin-bottom:10px;line-height:25px;background:#eee;}
.item .more{position:absolute;right:0px;top:12px}
</style>
<div id="container">
<div class="item">1<br />2<br />3<br />4<br />5</div>
<div class="item">1<br />2<br />3<br />4<br />5</div>
<div class="item">1<br />2</div>
<div class="item">1</div>
<div class="item">1<br />2<br />3</div></div>
<script>
    function exp() {
        var exp = this.innerHTML == '更多';
        this.parentNode.style.height = exp ? 'auto' : '50px';
        this.innerHTML = exp ? '收起' : '更多';
        return false;
    }
    var items = document.getElementById('container').childNodes,item,more;
    for (var i = 0; i < items.length; i++) {
        item = items[i];
        if (item.nodeType == 1) { //过滤掉空白节点
            if (item.scrollHeight > 50) { //大于高度，添加more
                more = document.createElement('a');
                more.innerHTML = '更多';
                more.className = 'more';
                more.href = '#';
                more.onclick = exp;
                item.appendChild(more);
            }
        }
    }
</script>