最大高度与原始文本高度之间的可折叠 div

Question

有没有一种简单的方法（在纯 javascript 中）在设置的最大高度和文本高度之间折叠 div？

详细来说，我想加载一个具有预设高度（例如 40 像素）的 div，并显示一个“显示更多”按钮，因此当您单击它时，div 设置为其中文本的高度（例如 80 像素）。当您再次单击时，您将 div 的高度设置为其初始高度（40 像素）。

一个可视化的例子是这样的：

初始状态（40 像素）

div 的文本
会像
这个，所以当按钮
显示更多信息...

如果您点击“显示更多信息”，您将进入此状态（80 像素）

div 的文本
会像
这个，所以当 te 按钮
被按下了..
它显示剩余的文本
;)
显示较少的信息...

如果您点击“显示更少信息”，您将进入 previos 状态（40 像素）

我试过 height / max-height 和 clientHeight，但是当你设置 height您覆盖 clientHeight 之一的属性值。

提前致谢。如果解决方案太复杂，请不要犹豫回答。

Answer 1

您可能想看看本教程：http://papermashup.com/simple-jquery-showhide-div/

Answer 2

一个简单的解决方案就是使用 max-height 属性。

你可以设置：

div.style.maxHeight = 40; //initial state

如果按钮被按下：

div.style.maxHeight = 80; //final state (set a value bigger than the text is going to be)

如果再次按下：

div.style.maxHeight = 40; //initial state again

这个解决方案的问题是你并不真正知道真正的文本大小，所以如果你设置一个小于文本大小的最大高度，它就不能正常工作。但对我来说解决了这个问题。

谢谢，希望这对其他人有所帮助。

Answer 3

一个可能过于复杂的解决方案：

$('p').each(

function() {
    var that = $(this);
    that.attr('data-fullheight', that.height());
    that.height(that.height() / 2);
    that.closest('div').append('<a src="#" class="readmore">Read more</a>');
});

$('div').on('click', 'a.readmore', function(e) {
    var p = $(this)
        .closest('div')
        .find('p[data-fullheight]'),
        full = p.attr('data-fullheight');
    p.animate({
        'height' : full == p.height() ? full/2 : full
        },200)
});​

假定以下 HTML（尽管 div id 不是必需的）：

<div id="text">
    <p>...text...</p>
</div>

​JS Fiddle demo.

只是因为我认为最后一个还不够复杂，所以我想我也会发布这个（纯 JavaScript！）解决方案：

var readmores = [];

function heights(el) {
    if (!el) {
        return false;
    }
    else {
        var h = parseInt(window.getComputedStyle(el, null).height, 10),
            moreLess = document.createElement('a'),
            text = document.createTextNode('Read more'),
            parent = el.parentNode;

        readmores.push(moreLess);

        moreLess.src = '#';
        moreLess.className = 'readmore';
        moreLess.appendChild(text);

        parent.insertBefore(moreLess, el.nextSibling);

        el.setAttribute('data-fullheight', h);
        el.style.height = Math.floor(h / 2) + 'px';
    }
}

function toggleHeight(el) {
    if (!el) {
        return false;
    }
    else {
        var full = el.getAttribute('data-fullheight'),
            curHeight = parseInt(el.style.height, 10);

        el.style.height = full == curHeight ? Math.floor(full / 2) + 'px' : full + 'px';
    }
}

function toggleText(el) {
    if (!el) {
        return false;
    }
    else {
        var text = el.firstChild.nodeValue;
        el.firstChild.nodeValue = text == 'Read more' ? 'Read less' : 'Read more';
    }
}

var paras = document.getElementsByTagName('p');

for (var i = 0, len = paras.length; i < len; i++) {
    var cur = paras[i];
    heights(cur);
}

for (var i=0, len=readmores.length; i<len; i++){
    readmores[i].onclick = function(){
        toggleHeight(this.previousElementSibling);
        toggleText(this);
    }
}

​JS Fiddle demo.

这可行（在 Chrome 21 中），但绝对不允许 IE 需要对其进行一些修改。