浅谈CSS+jQuery实现折叠菜单

最新推荐文章于 2024-04-28 10:35:17 发布

筱葭

最新推荐文章于 2024-04-28 10:35:17 发布

阅读量1.8k

点赞数 1

分类专栏： CSS jQuery 文章标签： CSS jQuery 折叠菜单

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53759072

版权

CSS 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

jQuery

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<title>折叠菜单</title>
		<style>
			body{
				background:grey;
				font-family:Microsoft Yahei;
				color:white;
			}
			.types a{
				text-decoration:none;
				color:white;
			}
			.types ul{
				display:none;
			}
			.files ul{
				display:none;
			}
		</style>
		<script src="js/jquery-1.8.2.min.js"></script>
		<script>
			$(document).ready(function(){
				var span=$(".files").find("span");
				var ul=$(".files").find("ul");
				span.bind("click",function(){
					ul.each(function(){
						$(this).css("display","none");
					});
					$(this).next().css("display","block");
				});
			});
		</script>
	</head>
	<body>
		<ul class="files">
			<li class="file">
				<span>文件2-1</span>
				<ul>
					<li class="document"><a href="#">文档2-1-1</a></li>
					<li class="document"><a href="#">文档2-1-2</a></li>
				</ul>
			</li>
			<li class="file">
				<span>文件2-2</span>
				<ul>
					<li class="document"><a href="#">菜单2-2-1</a></li>
					<li class="document"><a href="#">菜单2-2-2</a></li>
				</ul>
			</li>
			<li class="file">
				<span>文件2-3</span>
				<ul>
					<li class="document"><a href="#">菜单2-3-1</a></li>
					<li class="document"><a href="#">菜单2-3-2</a></li>
				</ul>
			</li>
		</ul>
	</body>
</html>

筱葭

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浅谈CSS+jQuery实现折叠菜单

折叠菜单 body{ background:grey; font-family:Microsoft Yahei; color:white; } .types a{ text-decoration:none; color:white; } .types ul{ display:none; } .files ul{ displ
复制链接

扫一扫

专栏目录