0

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

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

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

初始状态（40 像素）

div 的文本
会是
这样的，所以当按钮
显示更多信息时......

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

div 的文本
会是
这样的，所以当
按下 te 按钮时..
它会显示剩余的文本
;)
显示较少的信息...

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

我尝试过使用height / max-height和clientHeight，但是当您设置height属性值时，您会覆盖clientHeight之一。

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

4

3 回答 3

1

You might want to take a look to this tutorial: http://papermashup.com/simple-jquery-showhide-div/

于 2012-09-03T16:15:41.340 回答
1

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

$('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>

​<a href="http://jsfiddle.net/davidThomas/TEGF7/" rel="nofollow">JS Fiddle 演示。

只是因为我认为最后一个还不够复杂，所以我想我也会发布这个（纯 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);
    }
}

​<a href="http://jsfiddle.net/davidThomas/TEGF7/1/" rel="nofollow">JS Fiddle 演示。

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

于 2012-09-03T16:19:15.547 回答
1

一个简单的解决方案就是使用 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

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

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

于 2012-09-03T16:21:50.530 回答