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

問題解答

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

思路如下：

1.單擊當前菜單的時候，記錄下來，先把所有打開的菜單全部關閉，最后再把自己開啟

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

以上代碼只是一個演示例子，大概思路捋捋，看看行不

網上查詢了下資料，原來有個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();