简易的二级菜单

最新推荐文章于 2022-05-21 13:52:05 发布

原创最新推荐文章于 2022-05-21 13:52:05 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

博客主要展示了源码和对应的效果图，为信息技术相关内容提供了直观呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/sdmenu.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			a,img{
				border: 0;
				text-decoration: none;
			}
			body{
				font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
			}
			
		</style>
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				/*
				* 每一个菜单都是div
				* 当div具有collapsed这个类，div是折叠状态
				* 当div没有这个类时，是打开状态
				*/
				
				//获取所有class为menuSpan的元素
				var menuSpan = document.getElementsByClassName("menuSpan");
				
				//定义一个变量，来保存当前打开的菜单
				var openDiv = menuSpan[0].parentNode;
				
				//为span绑定单击响应函数
				for(var i=0 ; i<menuSpan.length ; i++){
					menuSpan[i].onclick = function(){
						
						//this代表当前点击的span
						//获取当前span的父元素
						var parentDiv = this.parentNode;
						
						//切换菜单的显示状态
						toggleMenu(parentDiv);
						
						//判断openDiv和parentDiv是否相同
						if(openDiv != parentDiv && !hasClass(openDiv,"collapsed")){
							//打开菜单以后，应该关闭之前打开的菜单
							//为了可以统一处理动画过渡效果
							//addClass(openDiv,"collapsed");
							//此处toggleClass不需要移除的功能
							//toggleClass(openDiv,"collapsed");
							
							//切换菜单的折叠状态
							toggleMenu(openDiv);
							
						};
						
						//修改openDiv为当前打开的菜单
						openDiv = parentDiv;
						
					};
				};
				
				/*
				* 切换菜单的折叠和显示状态
				*/
				function toggleMenu(obj){
					
					//在切换类之前，获取元素的高度
					var begin = obj.offsetHeight;
					
					//切换obj的显示
					toggleClass(obj,"collapsed");
					
					//在切换类之后获取一个高度
					var end = obj.offsetHeight;
					
					//动画效果，就是将高度从begin向end变化
					//将元素的高度重置为begin
					obj.style.height = begin + "px";
					
					//执行动画
					move(obj,"height",end,10,function(){
						//动画执行完毕，删除内联样式
						obj.style.height = null;
					});
					
				};
				
			};
		</script>
	</head>
	<body>
		<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">JavaScript工具包</a>
				<a href="#">CSS驱动</a>
				<a href="#">CodingForums</a>
				<a href="#">CSS例子</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
			</div>
		</div>
	</body>
</html>

效果图

在这里插入图片描述