javascript - slideToggle implémente l'effet de menu pliant, mais comment se rendre compte que cliquer sur cette option se développe et que les autres options se réduisent automatiquement ?

Question

Ce que je veux obtenir, c'est un menu pliable, mais le slidetoggle ne peut être réduit qu'en cliquant dessus. Ce que je veux, c'est cliquer sur d'autres options et le menu développé se réduira automatiquement. Comment puis-je le modifier ?
Le code est le suivant :
$("> 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();

Answer 1

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

Answer 2

L'idée est la suivante :

1. Lorsque vous cliquez sur le menu actuel, enregistrez-le, fermez d'abord tous les menus ouverts, et enfin ouvrez-vous

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

Le code ci-dessus n'est qu'un exemple de démonstration, donnez-moi une idée générale et voyez si cela fonctionne

Answer 3

J'ai vérifié les informations en ligne et découvert qu'il existe une fonction slideup(). Utilisez-la simplement pour remplacer 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();