伸缩菜单----html文件

运行结果：
在这里插入图片描述
程序代码：
html文件如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伸缩菜单</title>
<link rel="stylesheet" href="css/1.css" />//调用css
<script type="text/javascript" src="js/1-2.js"></script>//调用javascript
</head>
<body>
	<div id="id1" class="closed" onclick="toggle(this)">菜单</div>
	<ul class="hide">
	<ul class="tree">
		<li>
			<span class="open" onclick="toggle(this)">考勤管理</span>
			<ul class="show">
				<li>日常考勤</li>
				<li>请假申请</li>
				<li>加班/出差</li>
			</ul>
		</li>
		<li><span class="closed" onclick="toggle(this)">信息中心</span>
			<ul class="hide">
				<li>通知公告</li>
				<li>公司新闻</li>
				<li>规章制度</li>
			</ul>
		</li>
		<li><span class="closed" onclick="toggle(this)">协同办公</span>
			<ul class="hide">
				<li>公文流转</li>
				<li>文件中心</li>
				<li>内部邮件</li>
				<li>即时通信</li>
				<li>短信提醒</li>
			</ul>
		</li>
	</ul>
	</ul>
</body>
</html>

css文件如下：

li{
	list-style:none;
}
#id1{
	padding-left:20px;
	cursor:pointer;
}
li span{
	padding-left:20px;
	cursor:pointer;
}
.closed{background: url("../img/add.png")no-repeat center left;}//插入图片
.open{background: url("../img/minus.png")no-repeat center left;}//插入图片
.show{display:block;}
.hide{display:none;}

图片如下：
在这里插入图片描述

插入位置：

javascript文件：

function toggle(span){
	//1.当前打开状态，关闭
	if(span.className=="open"){
		span.className="closed";
		span.nextElementSibling.className="hide";
	}else{
		//2.当前为关闭状态，打开前先把已打开的关闭
		var openspan=document.querySelector("span[class='open']");
		if(openspan!=null){
			openspan.className="closed";
			openspan.nextElementSibling.className="hide";
		}
		span.className="open";
		span.nextElementSibling.className="show";
	}
}

控制某个标题打开或者某标题打开另两个标题关闭的相关代码在JavaScript中，可以进行相应更改，以达到自己想要的效果。

甜柚か

发布了9 篇原创文章 · 获赞 1 · 访问量 354

私信关注

伸缩菜单----html文件

猜你喜欢