html简单的折叠菜单

最新推荐文章于 2025-06-22 20:04:37 发布

zhuxian2009

最新推荐文章于 2025-06-22 20:04:37 发布

阅读量1.1w

点赞数 8

CC 4.0 BY-SA版权

分类专栏：量化交易系统 web开发量化交易系统

本文链接：https://blog.youkuaiyun.com/zhuxian2009/article/details/98032622

量化交易系统同时被 3 个专栏收录

34 篇文章

订阅专栏

量化交易系统

20 篇文章

订阅专栏

web开发

6 篇文章

订阅专栏

大道至简。html+css+一个简单的JavaScript函数，实现的折叠菜单。

功能：

1.鼠标放置在菜单选项，具有变化；

2.实现一级菜单，二级菜单；

3.一级菜单收起来时，前面是“+”，展开时，前面是“-”；

效果图：

直接贴贴贴代码：

zhedie_menu.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
	<style>
	*{margin:0;padding:0;}
	
	div{
		font-size:1.5em;
		color:red; 
		background-color: #dfdfdf; 
		border: 0 solid #1892B5; 
		padding: 0px
		margin: 0px;
	}
	
	a:link,a:visited
	{
		display:block;
		color:#000000;
		background-color:#dfdfdf;
		width:200px;
		text-align:left;
		padding:4px;
		text-decoration:none;
	}
	a:hover,a:active
	{
		background-color:#dfdfdf;
		font-weight:bold;
	}
	</style>
	<link href="/static/css/style2.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<script type="text/javascript">
		function show(parentid,childid) {
			var parent = document.getElementById(parentid)
			var child=document.getElementById(childid);
			if (child.style.display == "none") {     
			    child.style.display = "";
				if(parentid=="id_menu_realtime")
				{
					parent.innerHTML = "- 实时监控"
				}
				else if(parentid=="id_menu_backtest")
				{
					parent.innerHTML = "- 历史回测"
				}
			}
			else{     
			    child.style.display = "none"; 
				if(parentid=="id_menu_realtime")
				{
					parent.innerHTML = "+ 实时监控"
				}
				else if(parentid=="id_menu_backtest")
				{
					parent.innerHTML = "+ 历史回测"
				}			   
			}
		}
	</script>

	<ul id="sellist">
		<div id="realtime" style="color:blue" onclick="show('id_menu_realtime','child_realtime')" >
		<li><a id="id_menu_realtime" href="#">+ 实时监控</a></li>
		</div> 
		<div id="child_realtime" style="display:none"> 
				<li><a href="/query_bt_w" target="iframeContent">&nbsp;&nbsp;W底</a></li>
				<li><a href="/static/xxx.html" target="iframeContent">&nbsp;&nbsp;突破</a></li>
				<li><a href="/static/xxxxx.html" target="iframeContent">&nbsp;&nbsp;热点概念</a></li>
		</div>
	</ul>
		
	<ul id="sellist">
		<div id="backtest" style="color:blue" onclick="show('id_menu_backtest','child_backtest')" > 
		<li><a id="id_menu_backtest" href="#">+ 历史回测</a></li>
		</div> 
		<div id="child_backtest" style="display:none"> 
				<li><a href="/xxxx" target="iframeContent">&nbsp;&nbsp;W底</a></li>
				<li><a href="/static/xxxxxxxx.html" target="iframeContent">&nbsp;&nbsp;突破</a></li>
		</div>
	</ul>

</body>
</html>

style2.css

#sellist li
  {
	text-decoration: none;
	list-style: none;
	display:block;	
	margin:1px;
	text-align:left;
  }