前端简单抽屉菜单实现

		

			
菜单一
			

				子菜单

				子菜单

				子菜单

				子菜单

			
		
		

			
菜单二
			

				子菜单

				子菜单

				子菜单

				子菜单

			
		
		

			
菜单三
			

				子菜单

				子菜单

				子菜单

				子菜单

			
		
	

$(function() {

		$(".Title").click(function() {
			if($(this).next(".MenuContent").css("display") != "none") {
				$(this).next(".MenuContent").slideUp(500);
			} else {
				$(".Menu").each(function() {               //jQuery遍历
					$(this).children(".MenuContent").hide();
				});
				$(this).next(".MenuContent").slideDown(500);
			}
		});

});

.list{
	width:160px;
	height: 180px;
	border: 1px solid blue;
	overflow: scroll;
}
.Menu {
	padding: 0px;
}

.Title {
	width: 100%;
	height: 30px;
	font-size: 20px;
	text-align: center;
	background-color: bisque;
	padding:0px;
	border-bottom: #79808A 1px solid;
}

.MenuContent {
	display: none;
	width: 100%;
	font-size: 16px;
	text-align: center;
	padding: 0;
	border-bottom: #ffbc66 1px solid;
}