JQuery实现-展开折叠效果

最新推荐文章于 2023-04-23 23:47:37 发布

fengxue_snow

最新推荐文章于 2023-04-23 23:47:37 发布

阅读量7.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： JQuery

本文链接：https://blog.youkuaiyun.com/fengxue_snow/article/details/97900733

JQuery 专栏收录该内容

9 篇文章

订阅专栏

该博客介绍了如何使用JQuery来实现展开和折叠的功能，初始状态下第五条内容之后会被隐藏。点击展开按钮后，所有内容可见，并且品牌0和品牌5的文字变为红色。

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

JQ实现-展开折叠查看全部

1.默认情况下，第五条之后的内容被隐藏；
2.点击展开时，全部显示，并给品牌0、品牌5字体改为红色。
默认显示为折叠状态：
在这里插入图片描述
展开状态：

代码：

<style>
			/*common css begin*/
			*{margin:0px;padding:0px;}
			body{font-family: 微软雅黑,Microsoft yahei,Arial,Verdana,Tahoma,sans-serif; font-size: 12px;}
			a { color: #666; text-decoration: none; cursor: pointer; }
			a, input { outline: none; }
			ul li{list-style: none;}
			.fl { float: left; }
			.fr { float: right; }
			.clearfix:after{content:"";display:block;clear: both;}
			/*common css end*/
			ul li{width:100px;padding:8px;text-align: center;}
			ul li:nth-child(odd){background:#ccc;}
			ul li:nth-child(even){background:#EDFBFB;}
			ul li a{display:block;}
			ul li a span{display: block;}
			.promoted{color:#f00;}
			ul li:last-child{background: #12BCA6;}
			ul li:last-child a{color:#fff;}
			#change span{display: block;background:url(images/icons/fold_icon.png) no-repeat 65px 2px;}
		</style>
		<ul>
			<li>品牌0</li>
			<li>品牌1</li>
			<li>品牌2</li>
			<li>品牌3</li>
			<li>品牌4</li>
			<li>品牌5</li>
			<li>品牌5</li>
			<li>品牌6</li>
			<li>品牌7</li>
			<li>品牌8</li>
			<li>品牌9</li>
			<li><a href="javascript:;" id="change"><span>展开</span></a></li>
		</ul>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				var $categary = $("ul li:gt(5):not(:last)");
				$categary.hide();
				$("#change").click(function(){
					if($categary.is(':visible')){
						$categary.hide();
						$(this).find("span")
						.text("展开")
						.css("background","url(images/icons/fold_icon.png) no-repeat 65px 2px");
						$("ul li").css("color","#333");
					}else{
						$categary.show();
						$(this).find("span")
						.text("折叠")
						.css("background","url(images/icons/fold_icon_curr.png) no-repeat 65px 2px");
						$("ul li").filter(":contains('品牌0'),:contains('品牌5')").css("color","red");
					}
					return false;
				});
			});
		</script>