<!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>
<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>
扫一扫
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
