使用jQuery实现图书管理菜单导航

最新推荐文章于 2023-07-28 15:50:21 发布

煎蛋zai冒泡

最新推荐文章于 2023-07-28 15:50:21 发布

阅读量362

点赞数

文章标签： jquery html servlet

本文链接：https://blog.csdn.net/weixin_68266487/article/details/127387907

版权

案例：

先写HTML布局：

	<body>
		<div id="main">
			<div id="head">
				<h2>图书分类</h2>
				<span id="pic" index="0">

				</span>
			</div>
			<div id="body">
				<div id="content">
					<ul>
						<li><a href="#">小说</a><i>(1110)</i></li>
						<li><a href="#">文艺</a><i>(2350)</i></li>
						<li><a href="#">青春</a><i>(1985)</i></li>
						<li><a href="#">少儿</a><i>(1102)</i></li>
						<li><a href="#">生活</a><i>(2350)</i></li>
						<li><a href="#">社科</a><i>(5684)</i></li>
						<li><a href="#">管理</a><i>(1256)</i></li>
						<li><a href="#">计算机</a><i>(2135)</i></li>
						<li><a href="#">教育</a><i>(3120)</i></li>
						<li><a href="#">工具书</a><i>(4213)</i></li>
						<li><a href="#">引进版</a><i>(1752)</i></li>
						<li><a href="#">其他类</a><i>(9872)</i></li>
					</ul>
				</div>
				<div id="foot">
					<a href="">简化👈</a>
				</div>
			</div>
		</div>
	</body>

css样式布局：

		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			ul li {
				list-style: none;
			}

			.clear {
				clear: both;
			}

			#main {
				
				width: 370px;
				border: 1px solid darkorange;
				margin: 20px auto;
			}

			#head {
				width: 370px;
				height: 50px;
				background-color: darkkhaki;
				line-height: 50px;
			}

			#head h2 {
				width: 300px;
				margin-left: 10px;
				float: left;

			}

			#head span {
				display: block;
				width: 25px;
				height: 12.5px;
				float: right;
				margin-top: 16px;
				 border: 1px crimson solid; 
				background: url(img/pic.png);
			}

			#content {
				margin-top: 10px;
			}

			#content ul li {
				float: left;
				width: 110px;
				height: 25px;
				line-height: 25px;
				margin-left: 10px;
				font-size: 14px;
			}

			#content ul li a {
				color: darkmagenta;
			}

			#content ul li i {
				color: darkmagenta;
			}


			#foot {
				clear: both;
				height: 30px;
				margin-top: 10px;
				margin-left: 300px;
			}

			#foot a {
				color: royalblue;
			}
		</style>

如何点击按钮使内容全部隐藏：

$(function() {
				$("#pic").click(function() {
					var index = $(this).attr("index")
					if (index == 0) {
						//修改图标
						$(this).css("background", "url(img/pic.png) 0 -12.5px")
						$(this).css("margin-top", "28px");
						$(this).attr("index", "1");
						//让内容隐藏
						$("#body").slideUp(1000)
					} else {
						//修改图标
						$(this).css("background", "url(img/pic.png)")
						$(this).css("margin-top", "16px");
						$(this).attr("index", "0");
						//让内容显示
						$("#body").slideDown(1000)
					}
				})
            })

点击简化按钮让内容简化更多时内容打开：

			$(function() {
				$("#foot>a").click(function() {
					//判断li是否是隐藏状态
					if ($("#content>ul>li").is(":hidden")) {
						//显示
						$("#content>ul>li").fadeIn(1000)
						$(this).text("简化👈")
						return false
					} else {
						//隐藏
						$("#content>ul>li:gt(4)").not(":last").fadeOut(1000)
						$(this).text("更多👉")
						return false
					}
				})
			})

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			ul li {
				list-style: none;
			}

			.clear {
				clear: both;
			}

			#main {
				
				width: 370px;
				border: 1px solid darkorange;
				margin: 20px auto;
			}

			#head {
				width: 370px;
				height: 50px;
				background-color: darkkhaki;
				line-height: 50px;
			}

			#head h2 {
				width: 300px;
				margin-left: 10px;
				float: left;

			}

			#head span {
				display: block;
				width: 25px;
				height: 12.5px;
				float: right;
				margin-top: 16px;
				 border: 1px crimson solid; 
				background: url(img/pic.png);
			}

			#content {
				margin-top: 10px;
			}

			#content ul li {
				float: left;
				width: 110px;
				height: 25px;
				line-height: 25px;
				margin-left: 10px;
				font-size: 14px;
			}

			#content ul li a {
				color: darkmagenta;
			}

			#content ul li i {
				color: darkmagenta;
			}


			#foot {
				clear: both;
				height: 30px;
				margin-top: 10px;
				margin-left: 300px;
			}

			#foot a {
				color: royalblue;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#pic").click(function() {
					var index = $(this).attr("index")
					if (index == 0) {
						//修改图标
						$(this).css("background", "url(img/pic.png) 0 -12.5px")
						$(this).css("margin-top", "28px");
						$(this).attr("index", "1");
						//让内容隐藏
						$("#body").slideUp(1000)
					} else {
						//修改图标
						$(this).css("background", "url(img/pic.png)")
						$(this).css("margin-top", "16px");
						$(this).attr("index", "0");
						//让内容显示
						$("#body").slideDown(1000)
					}
				})
				$("#foot>a").click(function() {
					//判断li是否是隐藏状态
					if ($("#content>ul>li").is(":hidden")) {
						//显示
						$("#content>ul>li").fadeIn(1000)
						$(this).text("简化👈")
						return false
					} else {
						//隐藏
						$("#content>ul>li:gt(4)").not(":last").fadeOut(1000)
						$(this).text("更多👉")
						return false
					}
				})
			})
		</script>
	</head>
	<body>
		<div id="main">
			<div id="head">
				<h2>图书分类</h2>
				<span id="pic" index="0">

				</span>
			</div>
			<div id="body">
				<div id="content">
					<ul>
						<li><a href="#">小说</a><i>(1110)</i></li>
						<li><a href="#">文艺</a><i>(2350)</i></li>
						<li><a href="#">青春</a><i>(1985)</i></li>
						<li><a href="#">少儿</a><i>(1102)</i></li>
						<li><a href="#">生活</a><i>(2350)</i></li>
						<li><a href="#">社科</a><i>(5684)</i></li>
						<li><a href="#">管理</a><i>(1256)</i></li>
						<li><a href="#">计算机</a><i>(2135)</i></li>
						<li><a href="#">教育</a><i>(3120)</i></li>
						<li><a href="#">工具书</a><i>(4213)</i></li>
						<li><a href="#">引进版</a><i>(1752)</i></li>
						<li><a href="#">其他类</a><i>(9872)</i></li>
					</ul>
				</div>
				<div id="foot">
					<a href="">简化👈</a>
				</div>
			</div>
		</div>
	</body>
</html>