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();
問題解答
回答1:$(this).siblings().slideUp()
思路如下:
1.單擊當前菜單的時候,記錄下來,先把所有打開的菜單全部關閉,最后再把自己開啟
$('.menu .menu-header').on('click',function(){ var toggleTarget=$(this); //先把其他得關掉 $('.menu .menu-content').removeClass('active'); $(this).find('.menu-content').addclass('active'); })
以上代碼只是一個演示例子,大概思路捋捋,看看行不
回答3:網上查詢了下資料,原來有個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();
