<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表效果</title>
<script src="jquery.min.js" type="text/javascript" ></script>
<style type="text/css">
a{
text-decoration: none;
}
li{
list-style: none;
float: left;
column-count: 3;
column-width: 33%;
}
</style>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">索尼</a><i>(30440)</i></li>
<li><a href="#">三星</a><i>(30440)</i></li>
<li><a href="#">尼康</a><i>(30440)</i></li>
<li><a href="#">松下</a><i>(30440)</i></li>
<li id="hj"><a href="#">卡西欧</a><i>(30440)</i></li>
<li><a href="#">富士</a><i>(30440)</i></li>
<li><a href="#">柯达</a><i>(30440)</i></li>
<li><a href="#">宾得</a><i>(30440)</i></li>
<li><a href="#">理光</a><i>(30440)</i></li>
<li><a href="#">奥林巴斯</a><i>(30440)</i></li>
<li><a href="#">明基</a><i>(30440)</i></li>
<li><a href="#">爱国者</a><i>(30440)</i></li>
<li><a href="#">其他名牌相机</a><i>(30440)</i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
<script type="text/javascript">
var $category = $("ul li:gt(5):not(:last)");
$category.hide();
var $btn =$('.showmore>a');
$btn.click(function(){
alert("");
$category.show();
$(this).find("span").text("精简品牌");
return false;
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>列表效果</title>
<script src="jquery.min.js" type="text/javascript" ></script>
<style type="text/css">
a{
text-decoration: none;
}
li{
list-style: none;
float: left;
column-count: 3;
column-width: 33%;
}
</style>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">索尼</a><i>(30440)</i></li>
<li><a href="#">三星</a><i>(30440)</i></li>
<li><a href="#">尼康</a><i>(30440)</i></li>
<li><a href="#">松下</a><i>(30440)</i></li>
<li id="hj"><a href="#">卡西欧</a><i>(30440)</i></li>
<li><a href="#">富士</a><i>(30440)</i></li>
<li><a href="#">柯达</a><i>(30440)</i></li>
<li><a href="#">宾得</a><i>(30440)</i></li>
<li><a href="#">理光</a><i>(30440)</i></li>
<li><a href="#">奥林巴斯</a><i>(30440)</i></li>
<li><a href="#">明基</a><i>(30440)</i></li>
<li><a href="#">爱国者</a><i>(30440)</i></li>
<li><a href="#">其他名牌相机</a><i>(30440)</i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
<script type="text/javascript">
var $category = $("ul li:gt(5):not(:last)");
$category.hide();
var $btn =$('.showmore>a');
$btn.click(function(){
alert("");
$category.show();
$(this).find("span").text("精简品牌");
return false;
})
</script>
</body>
</html>
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
