jQuery抽屉式侧边栏导航展开收缩下拉菜单代码

比较通用的侧栏收缩菜单jquery特效，点击可展开或收缩，应用于各类导航，除了二级菜单外也可以改成多级分类菜单。 收缩时间特效在menu.js里面设置，根据不同元素的不同状态切换样式；导航菜单的css样式也可以自由调整，根据个人喜好可以调整为多种颜色。 $(".menu_list ul li").click(function() { //判断对象是显示还是隐藏 if($(this).children(".div1").is(":hidden")){ //表示隐藏 if(!$(this).children(".div1").is(":animated")) { $(this).children(".xiala").css({'transform':'rotate(180deg)'}); //如果当前没有进行动画，则添加新动画 $(this).children(".div1"). animate({ height: 'show' }, 1000) //siblings遍历div1的元素 .end().siblings().find(".div1").hide(1000); } } else { //表示显示 if(!$(this).children(".div1").is(":animated")) { $(this).children(".xiala").css({'transform':'rotate(360deg)'}); $(this).children(".div1").animate({ height: 'hide' }, 1000) .end().siblings().find(".div1").hide(1000); } } }); animate({ height: 'show' }, 1000) //siblings遍历div1的元素 .end().siblings().find(".div1").hide(1000); } } else { //表示显示 if(!$(this).children(".div1").is(":animated")) { $(this).children(".xiala").css({'transform':'rotate(360deg)'}); $(this).children(".div1").animate({ height: 'hide' }, 1000) .end().siblings().find(".div1").hide(1000); } } });