Question

听起来这是一项非常简单的任务，但由于脚本和隐藏的孩子之后的图片加载，我发现这很难正常工作。每次加载页面时，我都会保持不同的高度。

$("h2").click(function(){
    var $wrap = $(this).parents(".wrapper");
    $wrap.find(".scroller").height(function(){
        var height = 0;            
        $wrap.find(".scroller > li:lt(3)").each(function(){
            height += $(this).outerHeight(true);
        });
        return height;
    }).slideDown();
});

$("h2").eq(0).click();

Answer 1

不是很优雅，但这应该是一个坚固的解决方案，用于将滚动条的高度设置为其前3个li项的高度：

$("h2").click(function(){
    var $wrap = $(this).closest(".wrapper");
    $wrap.find(".scroller").height(function() {
        var lis = $("> li:gt(2)", this).detach(),
            ret = $(this).outerHeight(true);
        $(this).append(lis);
        return ret;
    }).slideDown();
});

Fiddle
我稍微编辑了你的小提琴，为图像提供不同的尺寸，以便更好地进行测试。

我尝试使用.position()制作解决方案，但结果很奇怪，因此detach li s＆gt; 2，仅使用前3 .scroller获取outerHeight的{{1}}，并重新附加分离的li是我能想象的最佳解决方案。

jQuery滑落并揭示了前3个不同身高的孩子

1 个答案: