图1:
当点击显示全部品牌时会显示全部品牌列表图2:
点击精简显示时 回到图1
思路如下
1.隐藏部分品牌
2.当点击显示全部品牌时,将隐藏的品牌显示显示出来
3.点击全部品牌时,将按钮text换成精简显示品牌
3.点击精简显示品牌时,隐藏部分品牌,将按钮的text换成全部显示品牌
源代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var $category=$("ul li:gt(5):not(:last)");//获取索引值大于5并且不是最后一个元素 $category.hide();//隐藏获取到的对象 var $toggleBtn=$('div.showmore>a');//获取显示全部品牌按钮 //为按钮添加事件 $toggleBtn.click(function() { if($category.is(":visible"))//如果元素显示 { $category.hide();//隐藏$catagory $(this).find('span').css("background","url(img/down.gif) no-repeat 0 0").text("显示全部品牌");//显示品牌按钮切换成全部显示品牌 //$('ul li').removeClass("promoted");//去掉高亮模式 } else{ $category.show()//显示全部品牌 $(this).find('span').css("background","url(img/up.gif) no-repeat 0 0").text("精简显示品牌");//显示品牌按钮切换成精简显示品牌 //$('ul li ').filter(":contains('佳能'),:contains('尼康'),:contains(‘奥林巴斯’)").addClass("promoted");//添加高亮样式 } return false;//超链接不跳转 }); }); </script> </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><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> <div class="showmore"> <a href="more.html"><span>显示全部品牌</span></a> </div> </body> </html>