Web前端：常用组件1.层级菜单

最新推荐文章于 2024-07-19 20:49:20 发布

Sher_H

最新推荐文章于 2024-07-19 20:49:20 发布

阅读量1.5k

点赞数

分类专栏： Web前端文章标签： Web前端

本文链接：https://blog.csdn.net/Sher_H/article/details/87903841

版权

这篇博客探讨了Web前端中层级菜单的实现，强调了点击后仅展示所选子集并隐藏其他子集的效果，以提升用户体验。文章详细介绍了代码实现过程，并提醒开发者在处理快速点击时需要注意的细节，以防止菜单异常伸缩。

摘要由CSDN通过智能技术生成

1.层级菜单

（1）点击前：
在这里插入图片描述
点击后：

（2）实现效果：点击后只显示所点击的子集，隐藏其他项目的子集

（3）代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级菜单</title>
	
	
	<style type="text/css">
		body{
    
			font-family:'Microsoft Yahei';
		}
		body,ul{
    
			margin:0px;
			padding:0px;
		}
		
		ul{
    list-style:none;}


		.menu{
    
			width:200px;
			margin:20px auto 0;
		}

		.menu .level1,.menu li ul a{
    
			display:block;
			width:200px;
			height:30px;
			line-height:30px;
			text-decoration:none;
			background-color:#3366cc;
			color:#fff;
			font-size:16px;
			text-indent:10px;			
		}

		.menu .level1{
    
			border-bottom:1px solid #afc6f6;
			
		}

		.menu li ul a{
    
			font-size:14px;
			text-indent:20px;
			background-color:#7aa1ef;
					
		}

		.menu li ul li{
    
			border-bottom:1px solid #afc6f6;
		}

		

		.menu li ul{
    
			display:none;
		}

		.menu li ul.current{
    
			display:block;
		}

		.menu li ul li a:hover{
    
			background-color:#f6b544;
		}


	</style>
	
	<script type