Heim  >  Fragen und Antworten  >  Hauptteil

javascript - slideToggle implementiert den Klappmenüeffekt, aber wie erkennt man, dass das Klicken auf diese Option erweitert wird und andere Optionen automatisch reduziert werden?

Was ich erreichen möchte, ist ein ausklappbares Menü, aber der Schieberegler kann nur durch Klicken darauf ausgeblendet werden. Ich möchte auf andere Optionen klicken und das erweiterte Menü wird automatisch ausgeblendet.
Der Code lautet wie folgt:
$("> 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 Tage vor919

Antworte allen(3)Ich werde antworten

  • 漂亮男人

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

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

    Antwort
    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");
        
    })

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

    Antwort
    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();

    Antwort
    0
  • StornierenAntwort