javascript - slideToggle實現折疊選單效果,但是怎麼實現點擊這個選項展開,其他選項自動折疊呢?
某草草
某草草 2017-07-05 11:06:06
0
3
944

想要實現的是折疊選單,但是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();
某草草
某草草

全部回覆(3)
漂亮男人

雷雷

ringa_lee

思路如下:

1.點選目前選單的時候,記錄下來,先把所有開啟的選單全部關閉,最後再把自己開啟

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

以上程式碼只是一個示範例子,大概思路捋捋,看看行不

Peter_Zhu

網上查詢了下資料,原來有個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();
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板