jquery - 单击时向上滑动

Question

我的页面上有几个 div。页面加载时，我只希望 First div 可见，并带有“显示更多”链接。然后，在单击“显示更多”时，我想加载前三个 div，最后第二次单击它时，我希望它显示所有 div。

到目前为止，它运行良好。但是在显示全部之后，当单击span标签时，它应该向上滑动并隐藏除第一个div之外的所有内容，即它应该重置div，因为它们最初在页面加载时，以便它给出显示更多/显示更少效果。

<强> Here 是 fiddle

Answer 1

尝试这样

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>

<div class="OffersContainer">
<div class='pan-box'>A</div>
<div class='pan-box'>B</div>
<div class='pan-box'>C</div>
<div class='pan-box'>D</div>
<div class='pan-box'>E</div>
<span>Show more</span>
</div>

<script>
$(".OffersContainer > div:gt(0)").hide();
var click = false;
var i = 1;
$(".OffersContainer > span").click(function() {
    if (i <= 2) {
        $(this).siblings(click ? "div:gt(0)" : "div:lt(3)").slideDown();
        click = true;
    } else {
        $(this).siblings("div:gt(0)").slideUp();
        click = false;
        i = 0;
    }

    i++;
});
</script>