js实例教程一：用js实现竖的隐藏菜单

最新推荐文章于 2021-10-21 14:57:38 发布

wws199304

最新推荐文章于 2021-10-21 14:57:38 发布

阅读量1.8k

点赞数

分类专栏： javaWeb 文章标签： js javascript js菜单

本文链接：https://blog.csdn.net/wws199304/article/details/44750495

版权

这篇教程详细介绍了如何利用JavaScript创建一个垂直方向的隐藏菜单。通过JavaScript代码控制，菜单可以在需要时显示或隐藏，增强了用户体验。

摘要由CSDN通过智能技术生成

主要代码：

<SCRIPT language="javascript">
	function showsubmenu(sid){
		var ele;
		//先关闭其他的
		for(var i=1;i<10;i++){
			ele = document.getElementById("submenu" + i);
			if(ele!=null && i!=sid){
				ele.style.display="none";
			}
		}
		//显示点击的菜单
		whichEl = document.getElementById("submenu" + sid);
		if (whichEl.style.display == "none"){
			whichEl.style.display="";
		}else{
			whichEl.style.display="none";
		}		
	}
</SCRIPT>

实现思路：通过获取竖立表格的各行元素，用ele.style.display="none";和whichEl.style.display="";分别控制达到隐藏和显示的作用。

完整示例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/css.css" rel="stylesheet" type="text/css">
<title></title>
<style type=text/css>
	SCROLLBAR-FACE-COLOR: #9999CC;
	SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #39867B; SCROLLBAR-3DLIGHT-COLOR: #39867B; SCROLLBAR-ARROW-COLOR: #330000; SCROLLBAR-TRACK-COLOR: #E1E1FF; SCROLLBAR-DARKSHADOW-COLOR: #ffffff;}
	table  { border:0px; }
	td  { font:normal 12px 宋体; }
	img  { vertical-align:bottom; border:0px; }
	a  { font:normal 12px 宋体; color:#000000; text-decoration:none; }
	a:hover  { color:#cc0000;text-decoration:underline; }
	.sec_menu  { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#FFFFCC; }
	.menu_title  { }
	.menu_title span  { position:relative; top:2px; left:8px; color:#39867B; font-weight:bold; }
	.menu_title2  { }
	.menu_title2 span  { position:relative; top:2px; left:8px; color:#cc0000; font-weight:bold; }
</style>
<SCRIPT language="javascript">
	function showsubmenu(sid){
		var ele;
		//先关闭其他的
		for(var i=1;i<10;i++){
			ele = document.getElementByI