伸缩菜单----html文件

最新推荐文章于 2022-06-24 17:55:17 发布

Coisini_甜柚か

最新推荐文章于 2022-06-24 17:55:17 发布

阅读量686

点赞数 1

分类专栏： web前端前端知识库文章标签： javascript css html html5

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/104639368

版权

web前端同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

前端知识库

32 篇文章 0 订阅

订阅专栏

运行结果：
在这里插入图片描述
程序代码：
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";
	}
}