简单JavaScript菜单栏的扩展与隐藏

最新推荐文章于 2024-10-12 11:26:18 发布

Floating alone

最新推荐文章于 2024-10-12 11:26:18 发布

阅读量1k

点赞数 1

分类专栏： Javascript 文章标签：编辑器

本文链接：https://blog.csdn.net/zuoxianshen/article/details/121057469

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简单的JavaScript菜单栏的扩展与隐藏

实现菜单的收缩与扩展

<body>
	<div id="leftNav" class="left-nav">
		<div id="myMenu" class="menuBox">
			<ul class="spMenuBox">
				<li class="spMenuItem active">
					<div class="spMenu" onclick="show(this.title)" title="1">
						<span>菜单1</span>
					</div>
					<ul class="subMenuBox" style="display: block;" id="d1">
						<li><span class="subMenu">菜单1.1</span></li>
						<li><span class="subMenu">菜单1.2</span></li>
						<li><span class="subMenu">菜单1.3</span></li>
					</ul>
				</li>
				<li class="spMenuItem">
					<div class="spMenu" onclick="show(this.title)" title="2">
						<span>菜单2</span>
					</div>
					<ul class="subMenuBox" style="display: none;" id="d2">
						<li><span class="subMenu">菜单2.1</span></li>
						<li><span class="subMenu">菜单2.2</span></li>
						<li><span class="subMenu">菜单2.3</span></li>
						<li><span class="subMenu">菜单2.1</span></li>
						<li><span class="subMenu">菜单2.2</span></li>
						<li><span class="subMenu">菜单2.3</span></li>
					</ul>
				</li>
				<li class="spMenuItem">
					<div class="spMenu" onclick="show(this.title)" title="3">
						<span>菜单3</span>
					</div>
					<ul class="subMenuBox" style="display: none;" id="d3">
						<li><span class="subMenu">菜单3.1</span></li>
						<li><span class="subMenu">菜单3.2</span></li>
						<li><span class="subMenu">菜单3.3</span></li>
						<li><span class="subMenu">菜单3.1</span></li>
						<li><span class="subMenu">菜单3.2</span></li>
						<li><span class="subMenu">菜单3.3</span></li>
						<li><span class="subMenu">菜单3.1</span></li>
						<li><span class="subMenu">菜单3.2</span></li>
						<li><span class="subMenu">菜单3.3</span></li>
					</ul>
				</li>
				<li class="spMenuItem">
					<div class="spMenu" onclick="show(this.title)" title="4">
						<span>菜单4</span>
					</div>
					<ul class="subMenuBox" style="display: none;" id="d4">
						<li><span class="subMenu">菜单4.1</span></li>
						<li><span class="subMenu">菜单4.2</span></li>
						<li><span class="subMenu">菜单4.3</span></li>
					</ul>
				</li>
				<li class="subMenuItem">
					
					<div class="spMenu" onclick="show(this.title)" title="5"> 
						<span>菜单5</span>
					</div>
					<ul class="subMenuBox" style="display: none;" id="d5">
						<li><span class="subMenu">菜单5.1</span></li>
						<li><span class="subMenu">菜单5.2</span></li>
						<li><span class="subMenu">菜单5.3</span></li>
						<li><span class="subMenu">菜单5.1</span></li>
						<li><span class="subMenu">菜单5.2</span></li>
						<li><span class="subMenu">菜单5.3</span></li>
					</ul>
				</li>
			</ul>
		</div>
	
	</div>
</body>
<script>
var a=true;
function show(title){
var d = document.getElementById("d"+title);
	if(a){
		d.style.display = "block";
		a = false;
		}
		else
		{
			d.style.display = "none";
			a = true;
				}
			}
</script>