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