jQuery实现树形菜单的三种方法

寒骁杰

已于 2023-06-13 18:08:14 修改

阅读量5.3k

点赞数 2

分类专栏：入门案例文章标签： jQuery

于 2018-07-26 15:16:12 首次发布

本文链接：https://blog.csdn.net/qq_36639124/article/details/81220665

版权

入门案例专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树形菜单</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script>
	$(function(){
		$(".treeMenu>li>a").click(function(){
			// 方法一,需要给点击的a元素加id属性
			// 获取当前点击的a元素的id值
			// var idName = $(this).attr("id");
			// 对象紧跟着当前点击的a元素的ul进行类样式反转
			// $("#" + idName + " + ul").toggleClass("hidden");
			
			// 方法二,需要给点击的a元素加id属性
			// 对象紧跟着当前点击的a元素的元素进行类样式反转
			// $(this).next().toggleClass("hidden");
			
			// 方法三,不需要给点击的a元素加id属性
			// 对象紧跟着当前点击的a元素的元素进行类样式反转
			$(this).next().toggle(300,'linear');
		});
	});


</script>

<style type="text/css">
	ul,li{
		margin: 0px;
		padding: 0px;
	}
	
	.treeMenu{
		
	}
	
	ul li a{
		text-decoration: none;
		color: black;
	}
	
	.hidden{
		display: none;
	}
</style>

</head>
<body>
	
	<h2><img src="../images/fold.gif"/>树形菜单</h2>
	<ul class="treeMenu">
		<li>
			<img src="../images/fclose.gif"/>
			<a id="currId" href="javascript:void(0);">文学艺术</a>
			<ul class="hidden">
				<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
				<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
				<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
			</ul>
		</li>
		<li>
			<img src="../images/fclose.gif"/>
			<a id="currId1" href="javascript:void(0);">图片专区</a>
			<ul class="hidden">
				<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
				<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
				<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
			</ul>
		</li>
		<li>
			<img src="../images/fclose.gif"/>
			<a id="currId2" href="javascript:void(0);">最新影视</a>
			<ul class="hidden">
				<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
				<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
				<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
			</ul>
		</li>
	</ul>
	
</body>
</html>

效果图:

寒骁杰

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现树形菜单的三种方法

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;树形菜单&lt;/title&gt;&lt;script type="text/javascript" src="../js/jquery-1.8.3.js"&am
复制链接

扫一扫

专栏目录