搜索

首页  >  问答  >  正文

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

想要实现的是折叠菜单,但是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();
某草草某草草2750 天前987

全部回复(3)我来回复

  • 漂亮男人

    漂亮男人2017-07-05 11:08:06

    雷雷

    回复
    0
  • ringa_lee

    ringa_lee2017-07-05 11:08:06

    思路如下:

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

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

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

    回复
    0
  • 天蓬老师

    天蓬老师2017-07-05 11:08:06

    网上查询了下资料,原来有个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();

    回复
    0
  • 取消回复