原生态javascript纵向折叠菜单，竖向折叠菜单

最新推荐文章于 2021-12-16 20:39:48 发布

cdcdhj

最新推荐文章于 2021-12-16 20:39:48 发布

阅读量125

点赞数

分类专栏： javascript学习日记文章标签： javascript

本文链接：https://blog.csdn.net/cdcdhj/article/details/116771961

版权

HTML CSS JavaScript 交互菜单

关键词由CSDN通过智能技术生成

javascript学习日记专栏收录该内容

136 篇文章 0 订阅

订阅专栏

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head><title></title></head>
<style type="text/css">
#nav{width:100px;font:14px;}
.menu{color:white;width:100%;margin:0;padding:8 0 0 0;background-color:#336699;height:20px;text-align:center;line-height:12px;border-bottom:1px solid white;}
.menu1{width:100%;margin:0;padding:8 0 0 0;background-color:#337700;height:20px;text-align:center;line-height:12px;border-bottom:1px solid white;}
.list{width:100%;background-color:#fff;display:none;}
.list1{width:100%;background-color:#fff;display:block;}
.list ul{list-style:none;margin:0;padding:0;}
.list ul li{text-align:center;margin-bottom:5;}
</style>
<body>
<div id="nav">
<div class="menu">管理菜单</div>
<div class="list">
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>
<div class="menu">店面管理</div>
<div class="list">
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>
<div class="menu">菜单管理</div>
<div class="list">
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>
</div>
<script language="javascript">
function showmenu(){
	var menu=document.getElementsByClassName('menu');
	for(var i=0;i<menu.length;i++){
		menu[i].onclick=function(){
			if(this.classList.contains('menu')){　　//获取是否是有menu这个样式
				this.nextElementSibling.classList.toggle('list1');　　//下一个同辈元素如果没有list1就添加，如果有就删除
				this.classList.toggle('menu1');　　　//当前元素如果有menu1就删除，没有就添加
			}else{
				this.classList.toggle('menu');
				this.nextElementSibling.classList.toggle('list');
			}
		};
		
	}
}
showmenu();
</script>
</body>
</html>

cdcdhj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生态javascript纵向折叠菜单，竖向折叠菜单

<html><meta http-equiv="content-type" content="text/html;charset=utf-8"/><head><title></title></head><style type="text/css">#nav{width:100px;font:14px;}.menu{color:white;width:100%;margin:0;padding:8 0 0 0;bac
复制链接

扫一扫

专栏目录