菜单点击显示和隐藏

最新推荐文章于 2022-01-04 18:26:18 发布

z8853797

最新推荐文章于 2022-01-04 18:26:18 发布

阅读量2.9k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/z8853797/article/details/45285889

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    *{margin:0;
     padding:0;
     font-size:13px;
     list-style:none;}

.menu{width:210px;
      margin:50px auto;
      border:1px solid #ccc;}

.menu p{height:25px;
        line-height:25px;
        font-weight:bold;
        background:#eee;
        border-bottom:1px solid #ccc;
        cursor:pointer;
        padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
         line-height:24px;
         padding-left:5px;}
</style>
	<script type="text/javascript">
		window.onload = function(){
			var menu = document.getElementById("menu");
			var ps = menu.getElementsByTagName("p");
			var uls = menu.getElementsByTagName("ul");
			for(var i = 0;i < ps.length;i++){
				ps[i].id = i;
				ps[i].onclick = function(){
					var ul = uls[this.id];
					if(ul.style.display == "block"){
						ul.style.display = "none";
					}else{
						ul.style.display = "block";
					}
				}
			}
		}
	</script>
</head>
<body>
	<div class="menu" id="menu">
		<div>
			<p>Web前端</p>
			<ul style="display:block">
				<li>JavaScript</li>
				<li>DIV+CSS</li>
				<li>jQuery</li>
			</ul>
		</div>
		<div>
			<p>后台脚本</p>
			<ul>
				<li>PHP</li>
				<li>ASP.net</li>
				<li>JSP</li>
			</ul>
		</div>
		<div>
			<p>前端框架</p>
			<ul>
				<li>Extjs</li>
				<li>Esspress</li>
				<li>YUI</li>
			</ul>
		</div>
	</div>
</body>
</html>

z8853797

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜单点击显示和隐藏

Document *{margin:0; padding:0; font-size:13px; list-style:none;}.menu{width:210px; margin:50px auto; border:1px solid #ccc;}.menu p{height:25px; line-heig
复制链接

扫一扫