Question

我的网页上有几个divs。在页面加载时，我只希望First div显示为＆＃39;显示更多＆＃39;链接。然后，点击“显示更多”后，我想加载first three个div，最后点击它，我希望第二次点击show all div。

到目前为止它的工作正常。但是在show all之后，当单击span标记时，它应该向上滑动并隐藏除第一个div之外的所有标记，即它应该重置最初在Page load上的div，以便它给出Show more/show less效果

Here 是小提琴

Answer 1

试试这个

＆＃13;

<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>

＆＃13;

单击向上滑动

1 个答案: