显示和隐藏

最新推荐文章于 2024-08-23 10:53:05 发布

不喜欢睡觉i

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量43

点赞数

分类专栏： java 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Sauryi/article/details/127322717

版权

java 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

页面代码

<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			ul li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			#main{
				width: 350px;
				border: 1px darkgrey solid;
				margin: 10px auto;
				overflow: auto;
			}
			#head{
				width: 350px;
				height: 50px;
				line-height: 50px;
				background-color: darkgray;
			}
			#head h2{
				float: left;
				margin-left: 10px;
			}
			#head span {
				display: block;
				width: 25px;
				height: 12.5px;
				background: url(img/pic.png);
				float: right;
				margin-top: 18px;
				margin-right: 10px;
			}
			
			#content {
				padding: 10px;
				overflow: auto;
				/*高度自适应*/
			}
			
			#content ul li {
				width: 110px;
				height: 25px;
				line-height: 25px;
				float: left;
			}
			#foot a{
				display: block;
				width: 60px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				float: right;
				margin-right: 10px;
			}
		</style>

基本代码

<div id="main">
					<div id="head">
						<h2>图书分类</h2>
						<span id="pic">
		
						</span>
					</div>
					<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>

运行代码

<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				$("#pic").click(function(){
					//需要判断一种状态，如果是a变成b，否者变成a
					var index=$(this).attr("index");
					if(index==0){
						$(this).css("background","url(img/pic.png) 0 12.5px");
						$("#content").slideUp(1000);
						$("foot").slideUp(1000);
						//改变本身的标记
						$(this).attr("index",1)
					}else{
						$(this).css("background","url(img/pic.png)");
						$("#content").slideDown(1000);
						$("foot").slideDown(1000);
						//改变本身的标记
						$(this).attr("index",0)
					}
				});
				//菜单简化
				$("#foot a").click(function() {
					if (!$("#content>ul>li:gt(4)").is(":hidden")) {
						//点击的时候，li索引大于4的隐藏
						$("#content>ul>li:gt(4)").not(":last").fadeOut();
						//内容变为更多
						$(this).text("更多☚");
					} else {
						//点击的时候，所有li显示
						$("#content>ul>li").fadeIn();
						//内容变为更多
						$(this).text("简化☚");
					}
					return false;
				});
			});
		</script>

效果展示