Question

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

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

一个直观的例子是这样的：

初始状态（40像素）

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

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

div的文字会像是一样这个，所以当te按钮
按下..
它显示了剩下的文字
;）
显示较少的信息...

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

我尝试使用 height / max-height 和 clientHeight ，但是当你设置 height 时您重写 clientHeight 的属性值。

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

Answer 1

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

Answer 2

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

$('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需要修改它。

Answer 3

解决这个问题的简单方法就是使用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

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

谢谢，希望这有助于其他人。

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

3 个答案: