slideToggle实现折叠菜单效果,但是怎么实现单击这个选项展开,其他选项自动折叠呢?

发布于 2022-09-04 23:33:15 字数 826 浏览 18 评论 0

想要实现的是折叠菜单,但是slidetoggle 只能单击才能收起来,我要的是单击别的选项,已经展开的自动折叠,请问怎么修改?
代码如下:
$("> li", this).each(function () {

            $(this).bind("click", function () {
                if($(this).hasClass('active')){
                    //$(".inner ol").hide();
                    //$(this).siblings("ol").slideToggle(settings.speed);
                    $(this).next("ol").slideToggle(settings.speed);
                    $(this).removeClass('active');
                }else{
                    $(this).siblings('li').removeClass('active');
                    //$(".inner ol").hide();
                    $(this).addClass('active')
                    $(this).next("ol").slideToggle(settings.speed);
                }
            });
        });
        //默认折叠
        $("> ol", this).hide();

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

一抹苦笑 2022-09-11 23:33:16
$(this).siblings().slideUp()

clipboard.png

倾其所爱 2022-09-11 23:33:16

思路如下:

1.单击当前菜单的时候,记录下来,先把所有打开的菜单全部关闭,最后再把自己开启

$(".menu .menu-header").on("click",function(){
    var toggleTarget=$(this);
    //先把其他得关掉
    $(".menu .menu-content").removeClass("active");
    $(this).find(".menu-content").addclass("active");
    
})

以上代码只是一个演示例子,大概思路捋捋,看看行不

っ左 2022-09-11 23:33:16

网上查询了下资料,原来有个slideup()函数,用他替换hide()即可,感谢!
$("> li", this).each(function () {

            $(this).bind("click", function () {
                if($(this).hasClass('active')){
                    $(".inner ol").slideUp('500');
                    $(this).removeClass('active');
                }else{
                    $(this).siblings('li').removeClass('active');
                    $(".inner ol").slideUp('500');
                    $(this).addClass('active')
                    $(this).next("ol").slideToggle(settings.speed);
                }
            });
        });
        //默认折叠
        $("> ol", this).hide();
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文