Home  >  Q&A  >  body text

javascript - slideToggle implements the folding menu effect, but how to realize that clicking this option expands and other options automatically collapse?

What I want to achieve is a folding menu, but the slidetoggle can only be collapsed by clicking on it. What I want is to click on other options and the expanded menu will automatically collapse. How can I modify it?
The code is as follows:
$("> 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();
某草草某草草2663 days ago917

reply all(3)I'll reply

  • 漂亮男人

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

    $(this).siblings().slideUp()
    
    

    reply
    0
  • ringa_lee

    ringa_lee2017-07-05 11:08:06

    The idea is as follows:

    1. When you click on the current menu, record it, first close all open menus, and finally open yourself

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

    The above code is just a demonstration example, give me a rough idea and see if it works

    reply
    0
  • 天蓬老师

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

    I checked the information online and found that there is a slideup() function. Just use it to replace hide(). Thank you!
    $("> 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();

    reply
    0
  • Cancelreply