Javascript 关于如何根据内容高度最好地显示其他内容的建议

我有一个保存内容的#横幅，基本上我想做的是显示一定数量的内容，然后有一个“更多”按钮，如果单击，将显示其余内容。这反过来也会设置#横幅高度的动画，我已经将#横幅高度设置为300px，但希望找到内容#内部的高度并相应地设置动画。目前我有以下版本，但我认为我使用了大量的ID/来达到效果，有人能建议我如何改进这个版本吗

在这里拉小提琴：

谢谢

---

Kyle

我建议您计算

内部

div的高度，并使用该高度设置动画

var $tmpInner = inner.clone().appendTo('body');
var divHeight = $tmpInner.outerHeight();
$tmpInner.remove();   

下面将根据div的内容计算innerDiv的高度

另外，将横幅的css样式更新为

溢出：隐藏

，这样就不需要为横幅单独设置动画

CSS:

#banner{background:#dedede;overflow: hidden; }
#outer{margin:0 auto;width:200px;}
#middle{height:200px;overflow:hidden}
#inner{width:200px;margin:0 auto;}
.entry{display:none;}

$(document).ready(function() {

    var outer = $('#outer'),
        middle = $('#middle'),
        inner = $('#inner'),
        /*innerH = inner.height(),*/
        banner = $('#banner'),
        more = $('#more');

    var $tmpInner = inner.clone().appendTo('body');
    var divHeight = $tmpInner.outerHeight();
    $tmpInner.remove();    

    // animate banner and #middle to reveal additional content
    more.on('click', function(e) {
        middle.animate({
            height: divHeight
        }, 300);

        /*banner.animate({
            height: innerH
        }, 300);*/
    });
});

JS:

#banner{background:#dedede;overflow: hidden; }
#outer{margin:0 auto;width:200px;}
#middle{height:200px;overflow:hidden}
#inner{width:200px;margin:0 auto;}
.entry{display:none;}

$(document).ready(function() {

    var outer = $('#outer'),
        middle = $('#middle'),
        inner = $('#inner'),
        /*innerH = inner.height(),*/
        banner = $('#banner'),
        more = $('#more');

    var $tmpInner = inner.clone().appendTo('body');
    var divHeight = $tmpInner.outerHeight();
    $tmpInner.remove();    

    // animate banner and #middle to reveal additional content
    more.on('click', function(e) {
        middle.animate({
            height: divHeight
        }, 300);

        /*banner.animate({
            height: innerH
        }, 300);*/
    });
});

---

注意：我不确定您为什么需要这么多wrappers div，但我想这可能是您的HTML的一部分。另外，我将把代码清理留给您。

为什么要添加所有这些div和id？你可以用一个DIV做同样的事情。嗨，现在所有的DIV，因为我不完全确定创建这个效果的最佳方法，但是如果你只是删除它们，效果不一样吗？我根本看不出它们是用来干什么的。