点击向上滑动

Question

我的主页上有几个 divs。在页面加载时，我只希望 First div 与 'Show more' link 可见。然后单击 'show more'，我想加载 first three divs，最后在第二次单击它时，我希望它加载 show all divs。

到目前为止一切正常。但是在 show all 之后，当点击 span 标签时，它应该向上滑动并隐藏除第一个 div 之外的所有内容，即它应该重置 divs，因为它们最初是在页面加载时，这样它给出了 Show more/show less 效果。

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>

点击向上滑动

Slide Up on click

jquery

slidedown

slideup

slidetoggle