代码之家 › 专栏 › 技术社区 › Huma Ali

单击时向上滑动

slideup slidedown slidetoggle jquery

Huma Ali · 技术社区 · 8 年前

我有几个 divs 在我的页面上。页面加载时,我只需要 First div可见,带有“显示更多”链接。然后单击“显示更多”,我想加载 first three divs,最后第二次单击它,我希望它 show all divs公司。

全部显示 ,当单击span标记时,它应该向上滑动并隐藏除第一个div之外的所有div,即它应该将div重置为最初加载页面时的div,以便它提供 Show more/show less 效应

Here 是小提琴

1 回复 | 直到 8 年前

Mani 8 年前

像这样试试

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

推荐文章

Dev · 停止所有按钮上的按钮文本更改

7 年前

JordanBarber · 根据用户对javascript“确认”的响应更改材质滑动切换的值

7 年前

Huma Ali · 单击时向上滑动

8 年前

730wavy · jQuery slidetoggle()divs使用多个id

9 年前

user5278424 · 只有1个div切换而不是全部

9 年前

margo · 角度ng向下滑动模块

9 年前

Eugene Balashov · 当你点击一个滑动div的外部时,如何使它成为一个关闭的div?

11 年前

NealR · jQuery-使用slideToggle功能呈现多个div元素

11 年前

Michael Libman · 如何使用jQuery使底部导航上下滑动?

11 年前