这里我们有点像产品选择效果，像aifang网的楼盘列表页面就有这种效果，先显示一部份然后点击更多就全部显示了，先来看效果图一
上面是在未点击，显示全部品牌时的效果，我们点击“显示全部品牌”出现如下效果。
这亲就全部显示出来了，只要再点击“精简显示品牌”就可以回到最初的效果了，好了下面我们来看效果代码
jquery代码，也是核心代码如下
| 代码如下 | 复制代码 |
|
<script src="/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var $category = $('ul li:gt(10):not(:last)'); //获取ul下索引值大于10的li元素的集合元素，然后去掉集合元素中的最后一个元素 $category.hide(); //隐藏上面获取到的对象 var $toggleBtn = $('div.showmore > a'); //获取“显示全部品牌”的按钮 $toggleBtn.toggle(function() { //toggle()方法用来交替一组动作 $category.show(); //显示全部品牌 $('.showmore a span').css("color", "red").text("精简显示品牌"); //这里使用的链式操作 $('ul li').filter(":contains('索尼'),:contains('三星')") //filter()筛选出符合要求的品牌，然后为他们添加promoted样式 .addClass("promoted"); //添加高亮样式 return false; //超链接不跳转 }, function() { $category.hide(); $('.showmore a span').css("color", "#333").text("显示全部品牌"); $('ul li').removeClass("promoted"); //去掉高亮样式 }); }); </script> |
|
css代码如下
| 代码如下 | 复制代码 |
|
<style type="text/css"> *{color:#333;font-size:12px;padding:0px;margin:0px;} a{color:#333;} li{padding:0px;margin:0px;list-style:none;} .SubCategoryBox{float:left;margin:10px;width:500px;height:auto;padding:10px;border:1px solid #666;} .SubCategoryBox ul{display:block;width:498px;} .SubCategoryBox ul li{width:120px;text-indent:20px;text-align:left;float:left;height:30px;line-height:30px;} .promoted{color:red;} .showmore{display:block;float:left;text-align:center;width:498px;height:25px;} .showmore a{margin:0 auto;background:#F2F2F2;display:block;border:1px solid #999;width:100px;height:22px;text-decoration:none;line-height:22px;} </style> |
|
html代码
| 代码如下 | 复制代码 |
|
<div class="SubCategoryBox"> <ul> <li>索尼</li> <li>三星</li> <li>索尼</li> <li>三星</li> <li>索尼</li> <li>三星</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>android</li> <li>其他品牌相机……</li> </ul> <div class="showmore"> <a href="#"><span>显示全部品牌</span></a> </div> </div> |
|
好了，我们只要把上面三段代码分别保存到文件就可以查看效果，也可以同时放在同一html页面的，这里我就不多讲了，大家应该都懂得。
时间： 2024-08-02 13:54:45