gpt4 book ai didi

jquery - 单击时向上滑动

转载 作者:行者123 更新时间:2023-12-01 04:02:20 26 4
gpt4 key购买 nike

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

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

<强> Here 是 fiddle

最佳答案

尝试这样

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

关于jquery - 单击时向上滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38306773/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com