点击显示隐藏-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44109821/article/details/103633261

本文介绍了一种使用jQuery实现的显示和隐藏分类列表的方法。通过隐藏列表中超过前五个元素的部分，并提供一个按钮来切换显示状态，实现了列表的精简显示和完全显示。此功能在商品分类、新闻列表等场景下十分实用。

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

在这里插入图片描述实现显示隐藏分类功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
		*{padding: 0; margin: 0;}
		ul{overflow: hidden;}
			body{width: 600px; margin: 40px auto 0; text-align: center;}
		    a:hover{color: darkgoldenrod; text-decoration: underline;}
			ul li{list-style: none; float: left; width: 200px;font-size: 12px;}
			a{text-decoration: none; color: cadetblue; font-size: 12px;}
			.more{margin-top: 40px;}
            .more a{width: 60px; height: 20px; border: 1px solid #CCCCCC; padding: 10px; display: block; margin: 0 auto;}
		</style>
		<script type="text/javascript">
			$(function(){
			    	var $li=$("li:gt(4):not(:last)")
			    	$li.hide()
			    	$(".more a").click(function(){
			    		if($li.is(":visible"))//visible可见内容
			    		{
			    			$li.hide()
			    			$(".more a").text("显示全部")
			    		}
			    		else
			    		{
			    			$li.show()
			    			$(".more a").text("显示精简")
			    		}
			    	})
			})
		</script>
	</head>
	<body>
		<ul>
    <li><a href="#">羽绒服</a><i>(3044) </i></li>
    <li><a href="#">连衣裙</a><i>(14831) </i></li>
    <li><a href="#">皮衣</a><i>(21951) </i></li>
    <li><a href="#">风衣</a><i>(12208) </i></li>
    <li><a href="#">半身裙</a><i>(1426) </i></li>
    <li><a href="#">裤子</a><i>(3091) </i></li>
    <li><a href="#">针织衫</a><i>(17821) </i></li>
    <li><a href="#">夹克</a><i>(12289) </i></li>
    <li><a href="#">毛衣</a><i>(2048) </i></li>
    <li><a href="#">棉服</a><i>(18242) </i></li>
    <li><a href="#">西装</a><i>(41414) </i></li>
    <li><a href="#">牛仔裤</a><i>(7265) </i></li>
    <li><a href="#">衬衫</a><i>(4242) </i></li>
    <li><a href="#">卫衣</a><i>(4624) </i></li>
    <li><a href="#">T恤</a><i>(72124) </i></li>
</ul>
<div class="more"><a href="#">显示全部</a></div>
	</body>
</html>