<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>关于一个隐藏和显示的小demo</title> <meta name="author" content="Administrator" /> <!-- Date: 2016-03-18 --> <script src="script/jquery-1.12.2.js" type="text/javascript"></script> <style type="text/css"> ul { list-style: none; padding: 0; } </style> </head> <body> <div class="SubCategoryBox"> <ul> <li> <a href="#">佳能</a><i>(30440)</i> </li> <li> <a href="#">索尼</a><i>(27220)</i> </li> <li> <a href="#">三星</a><i>(20808)</i> </li> <li> <a href="#">尼康</a><i>(17821)</i> </li> <li> <a href="#">松下</a><i>(12289)</i> </li> <li> <a href="#">卡西欧</a><i>(8242)</i> </li> <li> <a href="#">富士</a><i>(14894)</i> </li> <li> <a href="#">柯达</a><i>(9520)</i> </li> <li> <a href="#">宾得</a><i>(2195)</i> </li> <li> <a href="#">理光</a><i>(4114)</i> </li> <li> <a href="#">奥林巴斯</a><i>(12205)</i> </li> <li> <a href="#">明基</a><i>(1466)</i> </li> <li> <a href="#">爱国者</a><i>(3091)</i> </li> <li> <a href="#">其他品牌相机</a><i>(7275)</i> </li> </ul> <div class="showmore"> <a href="#">显示全部商品</a> </div> </div> <script type="text/javascript"> //1.隐藏第七个以后但除了最后一个的所有的项目。 var $category = $("ul li:gt(5):not(:last)"); $category.hide(); //2.用户点击全部商品。 var $showallthegoods = $(".showmore a"); $showallthegoods.click(function() { if ($category.is(":visible")) { $category.hide(); $(".showmore a").text("显示全部商品"); return false; } else { $category.show(); $(".showmore a").text("精简显示商品"); return false; } }); //为佳能添加时间，点击能复制。 $("ul li:eq(0)").click(function() { $(this).clone(true).appendTo("ul");//添加true代表该元素绑定的时间也会被复制。 }); </script> </body> </html>