JavaScript HTML CSS显示隐藏二级菜单（下拉菜单）

最新推荐文章于 2024-05-31 15:07:56 发布

英俊男孩

最新推荐文章于 2024-05-31 15:07:56 发布

阅读量8.1k

点赞数 5

文章标签： js css javascript html typescript

本文链接：https://blog.csdn.net/qq_44829011/article/details/106150171

版权

一级菜单效果如图一所示
按键选项一至选项四是一级菜单
当点击选项一时弹出二级菜单效果如图二所示（其余一级菜单也有对应的二级菜单）
点击前
点击后
html构造

<body>
 		<div>
 			<ul id='ul_0'>
 				<li><a οnclick="javascript:Foo(); return false;" href="#">二级菜单</a>
 					
 				</li>
 				<li><a href="#">选项一</a>
 					<ul>1</ul>
 					<ul>2</ul>
 					<ul>3</ul>
 				</li>
 				<li><a href="#">选项二</a>
 					<ul>1</ul>
 					<ul>2</ul>
 					<ul>3</ul>
 				</li>
 				<li><a href="#">选项三</a>
 					<ul>1</ul>
 					<ul>2</ul>
 					<ul>3</ul>
 					<ul>4</ul>
 				</li>
 				<li><a href="#">选项四</a>
 					<ul>1</ul>
 					<ul>2</ul>
 					<ul>3</ul>
 					<ul>4</ul>
 					<ul>5</ul>
 				</li>
 			</ul>
 		</div>
</body>

css样式需要注意的class1中display:none 是将选中元素不显示且不占位置
我们只需要用js操纵对象的类即可使二级菜单弹出和隐藏

<style>
		*{
			border:0;
			padding: 0;
			margin: 0;
		}
		div ul{
			background-color: bisque;
			border-radius: 5px;
			margin: 0 auto;
			list-style: none;
			border :1px solid black;
			width:80px;
			text-align: center;
			overflow: hidden;
		}
		div li{
			background-color: pink;
			margin: 0 auto;
			padding: none;
			list-style: none;
			border :1px solid black;
			width:80px;
			text-align: center;
		}
		.class1{
			display: none;
		}
	</style>

javascript 代码
使用queryselector选中元素修改类名
最后调用onclick函数使二级菜单默认隐藏

<script type="text/javascript">
	window.onload =function(){
		var ul_0= document.querySelector('#ul_0');
		
		for(var j=1 ;j<5;j++)
		ul_0.children[j].children[0].onclick =function(){
			var ul= this.parentNode.querySelectorAll('ul');
			for(var i=0;i<ul.length;i++){
				if(ul[i].className=='class1')
				ul[i].className='unclass1';
				else 
				ul[i].className='class1';
				
			}
		}
		for(var j=1 ;j<5;j++)
		ul_0.children[j].children[0].onclick();  /*默认各个选项卡关闭*/
		}
</script>

英俊男孩

关注

5
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
JavaScript HTML CSS显示隐藏二级菜单（下拉菜单）

一级菜单效果如图一所示按键选项一至选项四是一级菜单当点击选项一时弹出二级菜单效果如图二所示（其余一级菜单也有对应的二级菜单）html构造<body> <div> <ul id='ul_0'> <li><a οnclick="javascript:Foo(); return false;" href="#">二级菜单</a> </li> <li
复制链接

扫一扫