精简显示

最新推荐文章于 2024-11-15 17:39:15 发布

mz_shenbian

最新推荐文章于 2024-11-15 17:39:15 发布

阅读量520

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mz_shenbian/article/details/8811056

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
body{ font-size:15px; text-align:center}
.showLess{ margin:auto; width:600px} /*margin:auto;居中显示*/
.showLess ul li{ display:block; float:left; width:300px; line-height:30px}
.showMore{ clear:both; padding-top:15px;}
a{ text-decoration:none}
a:hover{color:green; text-decoration:underline;}
</style>
<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
/*1默认情况下显示前3个需要将第三个之后的隐藏（not排除）
2 点击显示全部品牌的时候显示全部的同时‘显示全部品牌’ 切换成‘精简显示品牌’
3点击精简显示品牌要将第三个之后的隐藏起来同时要将精简显示品牌替换成 ‘显示全部品牌’
*/
var $cat=$(".showLess ul li:gt(2):not(:last)");
$cat.hide();
$(".showMore a span").toggle(function(){
$cat.show();
$(".showMore a span").text("精简显示品牌")
return false;
},function(){
$cat.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>