jquery实现精简显示

最新推荐文章于 2021-08-17 18:15:26 发布

zhaohehe123

最新推荐文章于 2021-08-17 18:15:26 发布

阅读量999

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/zhaohehe123/article/details/8852557

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="utf-8"/>
<style>
*{margin:0;padding:0}
body{font-size:15px;text-align:center}
.showLess{margin:auto;width:600px}
.showLess ul li{display:block;float:left;width:200px;line-height:30px}
.showMore{clear:both;padding-top:15px}
a{text-decoration:none}
a:hover{color:orange;text-decoration:underline}
</style>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
var $pinpai=$(".showLess ul li:gt(2):not(:last)");
$pinpai.hide();
$(".showMore a span").toggle(function(){
$pinpai.show();
$(".showMore a span").text("精简显示");
return false;
},function(){
$pinpai.hide();
$(".showMore a span").text("全部显示");
return false;
});
});
</script>
</head>
<body>
<div class="showLess">
<ul>
<li><a href="#">美利达</a></li>
<li><a href="#">捷安特</a></li>
<li><a href="#">宝马</a></li>
<li><a href="#">飞鸽</a></li>
<li><a href="#">凤凰</a></li>
<li><a href="#">二八</a></li>
<li><a href="#">艾玛</a></li>
<li><a href="#">永久</a></li>
<li><a href="#">巴赫</a></li>
<li><a href="#">迈巴赫</a></li>
<li><a href="#">更多品牌</a></li>
</ul>
<div class="showMore">
<a href="#"><span>显示全部品牌</span></a></div>
</div>
</body>
</html>

zhaohehe123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现精简显示

*{margin:0;padding:0} body{font-size:15px;text-align:center} .showLess{margin:auto;width:600px} .showLess ul li{display:block;float:left;width:200px;line-height:30px} .showMore{clear:both;padd
复制链接

扫一扫