Day15-小功能系列:树状菜单

最新推荐文章于 2024-05-25 18:00:56 发布

Shark1300

最新推荐文章于 2024-05-25 18:00:56 发布

阅读量218

点赞数

分类专栏： js基础文章标签： js小功能

本文链接：https://blog.csdn.net/Scan_13286/article/details/84331577

版权

js基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Day15-小功能系列:树状菜单

树状菜单：点击标题，则隐藏/显示子元素。

效果图：

1.前端界面

使用<ul><li></li></ul>的方式布局。如下所示：

<body>
	<ul>
		<li style="cursor:pointer" onclick="show('memo1','span1')"><span id="span1">-</span>第一个</li>
	</ul>
	<ul id="memo1">
		<li>1102</li>
	    <li>1103</li>
	    <li>1104</li>
	    <li>1105</li>
	</ul>
	<ul>
		<li style="cursor:pointer" onclick="show('memo2','span2')"><span id="span2">-</span>第二个</li>
	</ul>
	<ul id="memo2">
		<li>1202</li>
	    <li>1303</li>
	    <li>1404</li>
	    <li>1505</li>
	</ul>
</body>

2.Css部分

给前端界面添加一些基础的样式

<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	li{
		margin-left: 30px;
		line-height: 30px;
		list-style: none;
	}
</style>

3.JavaScript部分

主要实现效果靠JavaScript部分。
1.首先导入JQuery文件。
2.通过前端界面中的两个添加的单击事件的li来触发show(id,sp)方法；
id参数：表示所对应需要隐藏的ul。
sp参数：表示所对应需要改变的span(即前端中的“-”和“+”的改变)。

<script type="text/javascript">
	function show(id,sp){
		//获取触发的方法所传来的id对应的标签的display属性，并赋给b变量。
		var b = $("#" + id).css("display");
		//判断传来的display属性是block还是none。
		if(b == "block"){
			//如果是block，则修改传来的sp对应的标签的html为“+”.
			$("#" + sp).html("+");
		}else{
			//否则修改为“-”.
			$("#" + sp).html("-");
		}
		//在将传来的id对应的标签添加toggle方法，即隐藏时显示，显示时隐藏。
		$("#" + id).toggle(1000);
	}
</script>