jquery实现简单收缩菜单

最新推荐文章于 2021-04-08 15:02:56 发布

我是一只萌新小菜鸟

最新推荐文章于 2021-04-08 15:02:56 发布

阅读量1.3k

点赞数 1

分类专栏： web前端文章标签：收缩菜单

本文链接：https://blog.youkuaiyun.com/Denghalou/article/details/81842160

版权

web前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何利用jQuery实现一个简单的收缩菜单效果。通过添加和移除类名，实现菜单项的点击展开与关闭，为网页增加交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>伸缩菜单</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			ul {
				list-style-type: none;
			}
			
			ul.uMenu {
				width: 150px;
			}
			
			a {
				text-decoration-line: none;
				color: white;
			}
			
			ul.uMenu li>a {
				background: #fa5659;
				display: block;
				height: 30px;
				line-height: 30px;
				border-left: 12px solid #ca3a3d;
				padding-left: 5px;
				border-bottom: 1px solid rgb(245, 235, 235);
			}
			
			ul.uItem li {
				border-left: 20px solid #fa5659;
				background: #e0b9be;
				height: 30px;
				line-height: 30px;
				padding-left: 5px;
				border-bottom: 1px solid rgb(245, 235, 235);
				cursor: pointer;
			}
		</style>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {

				$("ul.uMenu li ul").hide();

				$("ul.uMenu li > a").click(function() {

					//方法一
					// if ($(this).data("isShow") == 1) {
					//     $(this).data("isShow", 0);
					//     $(this).siblings("ul").slideUp();
					// } else {
					//     $(this).data("isShow", 1);
					//     $(this).siblings("ul").slideDown();
					// }

					//方法二
					// $("ul.uMenu li > a").not(this).siblings("ul").slideUp();
					$(this).siblings("ul").slideToggle();
				});
			});
		</script>
	</head>

	<body>
		<ul class="uMenu">
			<li>
				<a href="javascript:;">研发部</a>
				<ul class="uItem">
					<li>研发部1</li>
					<li>研发部2</li>
					<li>研发部3</li>
				</ul>
			</li>
			<li>
				<a href="javascript:;">管理部</a>
				<ul class="uItem">
					<li>管理部1</li>
					<li>管理部2</li>
					<li>管理部3</li>
					<li>管理部4</li>
					<li>管理部5</li>
				</ul>
			</li>
			<li>
				<a href="javascript:;">系统集成部</a>
				<ul class="uItem">
					<li>系统集成部1</li>
					<li>系统集成部2</li>
					<li>系统集成部3</li>
					<li>系统集成部4</li>
				</ul>
			</li>
			<li>
				<a href="javascript:;">BOSS</a>
				<ul class="uItem">
					<li>老板</li>
					<li>老板娘</li>
				</ul>
			</li>
		</ul>
	</body>

</html>