使用ul li 的商品列表展开合并案列

来源：互联网发布：暴风电视直播软件怎样编辑：程序博客网时间：2024/05/18 06:28

HTML布局

<html>
<head>
<base href="<%=basePath%>">

<title>商品列表展开合并</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=path %>/lib/jquery_1.8.3.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/showCategory.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
bady{font-size: 12px;text-align: center;}
a{color: #04D;text-decoration: none;}
a:hover{color: #F50;text-decoration: underline;}
.subCategory{width: 600px;margin: 0 auto;margin-top: 25px;}
.subCategory ul{list-style: none;}
.subCategory ul li{float: left;width: 200px; line-height: 20px;}
.showBtn{clear:both;text-align: center;padding-top: 10px;}
.showBtn a{margin: 0 auto;width: 120px;line-height: 20px;border: 1px solid #AAA;padding: 5px;}
.showBtn a span{padding-left: 15px;background: url("img/down.gif") no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<script type="text/javascript">

</script>

</head>

<body>
<input id="ctx" type="hidden" value="<%=path %>"/>
<div class="subCategory">
<ul>
<li><a href="#">佳能</a>(3256)</li>
<li><a href="#">索尼</a>(3256)</li>
<li><a href="#">oppo</a>(3256)</li>
<li><a href="#">小米</a>(3256)</li>
<li><a href="#">爱国者</a>(3256)</li>
<li><a href="#">华为</a>(3256)</li>
<li><a href="#">苹果</a>(3256)</li>
<li><a href="#">VOIO</a>(3256)</li>
<li><a href="#">诺基亚</a>(3256)</li>
<li><a href="#">摩托罗拉</a>(3256)</li>
<li><a href="#">金立</a>(3256)</li>
<li><a href="#">锤子</a>(3256)</li>
<li><a href="#">三星</a>(3256)</li>
<li><a href="#">东芝</a>(3256)</li>
<li><a href="#">卡西欧</a>(3256)</li>
<li><a href="#">其他品牌</a>(13256)</li>
</ul>
</div>
<div class="showBtn">
<a href="#" id="checkBtn">显示全部商品</a>
</div>
</body>
</html>

jqurey代码

$(function(){
/**获取下标大于6的元素不包含最后一个*/
var category = $("ul li:gt(6):not(:last)");
var btnStyle = $(".showBtn a span")
//alert(category.length);
category.hide();
$("#checkBtn").click(function(){
//alert("aa");
if(category.is(":visible")){
//隐藏商品列表
category.hide();
//更改设置背景
//btnStyle.css("background","url("+$('#ctx').val()+"/img/down.gif) no-repeat 0 0");
btnStyle.css("background","url(img/down.gif) no-repeat 0 0");
//alert($('#ctx').val());
//更改文字
btnStyle.text("显示全部商品");
}else{
//展示商品列表
category.show();
//更改设置背景
//btnStyle.css("background","url("+$('#ctx').val()+"/img/up.gif) no-repeat 0 0");
btnStyle.css("background","url(img/up.gif) no-repeat 0 0");
//更改文字
btnStyle.text("精简商品列表");
}
return false;
});
});

0 0