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

比较通用的侧栏收缩菜单jquery特效，点击可展开或收缩，应用于各类导航，除了二级菜单外也可以改成多级分类菜单。

分类：导航菜单 > 下拉导航难易：入门级

查看演示下载资源下载积分： 30 积分

收缩时间特效在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);
		}
	}
});

另外，每个菜单前面可以自行添加各种好看的小图标，效果会更好。