JQuery实现折叠式菜单的详细代码

两种风格：

1：点菜单项，每个子菜单项都可显示

	
		
		
	
	
		* {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.menu-list {
			width: 300px;
			margin: 60px auto;
			border: 2px solid #bbffff;
		}

		.menu-head {
			background-color: #aaaaff;
			text-align: center;
			height: 100px;
			line-height: 100px;
		}

		.menu-body>li {
			height: 60px;
			line-height: 60px;
			text-align: center;
		}
	
	
	
	
		
			

				

					
学科
					

						
语文
						
数学
						
英语
						
体育
					
				
				

					
水果
					

						
苹果
						
香蕉
						
草莓
						
西瓜
					
				
				

					
蔬菜
					

						
番茄
						
黄瓜
						
生菜
						
茄子
					
				
				

					
肉类
					

						
鱼肉
						
鸡肉
						
牛肉
						
猪肉
					
				
			
		
	

运行结果图：

2：点菜单项，仅当前子菜单项可显示，其余子菜单隐藏

	
		
		
	
	
		* {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		.menu-list {
			width: 300px;
			margin: 60px auto;
			border: 2px solid #bbffff;
		}

		.menu-head {
			background-color: #aaaaff;
			text-align: center;
			height: 100px;
			line-height: 100px;
		}

		.menu-body>li {
			height: 60px;
			line-height: 60px;
			text-align: center;
		}
	
	
	
	
		
			

				

					
学科
					

						
语文
						
数学
						
英语
						
体育
					
				
				

					
水果
					

						
苹果
						
香蕉
						
草莓
						
西瓜
					
				
				

					
蔬菜
					

						
番茄
						
黄瓜
						
生菜
						
茄子
					
				
				

					
肉类
					

						
鱼肉
						
鸡肉
						
牛肉
						
猪肉
					
				
			
		
	

运行结果图：

总结

到此这篇关于JQuery实现折叠式菜单的详细代码的文章就介绍到这了,更多相关jquery 折叠式菜单内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！