jquery - jQuery 向下滑动并显示前 3 个不同高度的孩子

Question

这听起来很容易，但由于脚本和隐藏的孩子之后加载图像，我发现很难让它正常工作。每次加载页面时，我都会不断获得不同的高度。

http://jsfiddle.net/ek5Uf/

$("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();
});

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

我尝试使用解决方案，.position()但它给出了奇怪detach的结果，因此lis > 2，仅使用前 3 s 获取.scrollers并重新附加分离的 s 是我能想象的最佳解决方案。outerHeightlili