js实现的折叠式菜单

用js实现的折叠式菜单

蒲公英1001

4343人浏览 · 2022-06-11 08:45:54

蒲公英1001 · 2022-06-11 08:45:54 发布

去年学习前端的时候，用jQuery实现了折叠式菜单，当时还写了这篇文章
《jQuery实现的折叠式菜单》
这两天学javascript，又尝试用js实现折叠式菜单。思路如下：
1.初始状态，让子菜单的各个超链接高度为0，下边框为0，背景图片为加号；
2.当鼠标点击时，高度为38px，下边框1像素、灰色，背景图片为减号；
3.使用条件语句判断状态，在两种状态间切换；
4.使用排他思想时当前元素展开，其他兄弟元素折叠；
5.css中使用transition属性实现渐变过渡。
完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>折叠式菜单特效</title>

		<style>
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			ul {
				list-style-type: none;
				margin: 100px;
				width: 223px;
			}

			.menu_head {
				width: 223px;
				height: 46px;
				line-height: 46px;
				padding-left: 38px;
				font-size: 16px;
				color: #475050;
				cursor: pointer;
				border: 1px solid #e0e0e0;
				font-weight: bold;
				background-color: #f0f0f0;
				background-image: url(img/pro_plus.png);
				background-position: right center;
				background-repeat: no-repeat;
			}

			.current {
				background-image: url(img/pro_down.png);
			}

			.menu_body {
				border-left: 1px solid #e0e0e0;
				border-right: 1px solid #e0e0e0;
				width: 223px;
			}

			.menu_body a {
				width: 223px;
				padding-left: 38px;
				display: block; 	/*不能去掉，只有是block，高度才有效*/
				line-height: 38px;
				color: #666;
				text-decoration: none;
				overflow: hidden; 	/*与高度为0 结合，溢出的部分隐藏*/
				height: 0px; 		/*高度0*/
				transition: all .3s;
			}
			.bt{
				border-bottom: 1px solid #e0e0e0; 
			}
		</style>
	</head>
	<body>
		<ul class="menu_list">
			<li>
				<dl class="menu_head">HTML语言</dl>
				<dt class="menu_body">
					<a href="#">HTML基础</a>
					<a href="#">图像和超链接</a>
					<a href="#">列表和表格</a>
					<a href="#">音频和视频</a>
				</dt>
			</li>
			<li>
				<dl class="menu_head">CSS样式表</dl>
				<dt class="menu_body">
					<a href="#">CSS基础</a>
					<a href="#">字体文本属性</a>
					<a href="#">超链接样式</a>
					<a href="#">列表样式</a>
					<a href="#">表格样式</a>
					<a href="#">表单样式</a>
				</dt>
			</li>
			<li>
				<dl class="menu_head">网页布局案例</dl>
				<dt class="menu_body">
					<a href="#">登陆页面的制作</a>
					<a href="#">入驻页面的制作</a>
					<a href="#">招生信息网</a>
					<a href="#">美妆网页</a>
				</dt>
			</li>
			<li>
				<dl class="menu_head">JavaScript</dl>
				<dt class="menu_body">
					<a href="#">JS的基础语法 </a>
					<a href="#">BOM对象</a>
					<a href="#" class="bt">DOM对象</a>
				</dt>
			</li>
		</ul>

		<script type="text/javascript">
			var list = document.querySelector('.menu_list');
			var menus = list.querySelectorAll('.menu_head');
			for (let i = 0; i < menus.length; i++) {
				menus[i].addEventListener('click', function() {
					alinks = this.nextElementSibling.children;
					if (this.className == 'menu_head') {
						this.className = 'menu_head current';
						for (let k = 0; k < alinks.length; k++) {
							alinks[k].style.height = '38px';
							alinks[k].style.borderBottom='1px solid #e0e0e0';
						}
					} else {
						this.className = 'menu_head';
						for (let k = 0; k < alinks.length; k++) {
							alinks[k].style.height = '0';
							alinks[k].style.borderBottom='0';
						}
					}
					for (let j = 0; j < menus.length; j++) { //排他思想
						if (j != i) {
							menus[j].className = 'menu_head';
							alist = menus[j].nextElementSibling.children;
							for (let k = 0; k < alist.length; k++) {
								alist[k].style.height = '0';
								alist[k].style.borderBottom='0';
							}
						}
					}
				})
			}

		</script>
	</body>
</html>