Javascript-类应用-02

最新推荐文章于 2024-07-11 20:55:36 发布

AChievemeniT

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量166

点赞数

分类专栏：刚好在学文章标签： javascript

本文链接：https://blog.csdn.net/AChievemeniT/article/details/108104817

版权

刚好在学专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>二级菜单</title>
		<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>

		<link rel="stylesheet" type="text/css" href="./css/sdmenu.css" />
		
		
		<script type="text/javascript" src="./style/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				/* 点击菜单，切换显示状态 */
				var menuSpan = document.querySelectorAll(".menuSpan");
				var openDiv = menuSpan[0].parentNode;
				for(i = 0;i<menuSpan.length;i++){
					menuSpan[i].onclick = function(){
						var parentDiv = this.parentNode;
						togleMenu(parentDiv);
						if(openDiv!= parentDiv && !hasClass(openDiv,"collapsed")){
							/* addClass(openDiv,"collapsed") */
							toggleClass(openDiv,"collapsed");
							togleMenu(openDiv);
						}
						
						//修改openDiv为当前div
						openDiv = parentDiv;
					}
				}
				function togleMenu(obj){
					var begin = obj.offsetHeight;
						toggleClass(obj,"collapsed");
						var end = obj.offsetHeight;
						obj.style.height = begin + "px";
						move(obj,"height",end,10,function(){
							obj.style.height = "";
						})
				}
			}
		</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>

AChievemeniT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript-类应用-02

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; text-
复制链接

扫一扫