jQuery实战之品牌展示列表效果
在项目中遇到的需求，效果是仿淘宝的。写出来和他家分享下，很简单的东西。^_^
只是初始状态；
这是点击后效果。
首相分析下需求：
1，首先在页面中创建导航，单击标题的时候，隐藏内容，同时小图标也改变。
2，单击更多的时候，显示隐藏的链接内容，并将"更多"变成"简化"，改变小图标，并高亮部分链接。
下面是完整代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb-2312">
5 <title>text</title>
6 <script type="text/javascript" src="jquery-1.4.2.js">
7 </script>
8 <style type="text/css">
9 *{ margin:0;padding:0;}
10 body{ font-size:13px;}
11 #wraper{ border:1px solid #ccc; width:301px; overflow:hidden;}
12 #wraper .Head{ background;#eee; padding:8px; height:18px; cursor:pointer;}
13 #wraper .Head h3{ float:left;}
14 #wraper .Head span{ float:right; margin-top:3px;}
15 #wraper .Content{ padding:8px;}
16 #wraper .Content ul{ list-style:none; list-style-type:none;}
17 #wraper .Content ul li{ float:left; width:95px; height:23px; line-height:23px;}
18 #wraper .Bot{ float:right; padding-top:5px; padding-bottom:5px;}
19 .GetFocus{ background:#eee;}
20 .one{ color:#ff8000;}
21 </style>
22 <script type="text/javascript">
23 $(function(){//页面加载事件
24 $(".Head").click(function(){//图片单击事件
25 if($(".Content").is(":visible")){//如果内容可见
26 $(".Head span img").attr("src","Images/a1.gif");//改变图片
27 //隐藏内容
28 $(".Content").hide();
29 }else{
30 $(".Head span img").attr("src","Images/a2.gif");//改变图片
31 $(".Content").show();
32 }
33 });
34 var $chaLi = $(".Bot > a") ;
35 var $prompt = $("ul li:gt(4):not(:last)")
36 $prompt.hide();
37 $($chaLi).click(function(){//热点链接单击事件
38 //如果内容为简化
39 if($chaLi.text() == "更多"){
40 //隐藏大于4 且不是最后一项的所有内容
41 $(".Bot img").attr("src","Images/a7.gif")
42 $prompt.show().addClass("GetFocus");
43 $("ul li").filter(":contains('青年'),:contains('老人'),:contains('少年')").addClass("one")
44 $($chaLi).text("简化");
45 }else{
46
47 $prompt.hide()
48 $(".Bot img").attr("src","Images/a6.gif")
49 $($chaLi).text("更多");
50 }
51 })
52
53 })
54 </script>
55 </head>
56 <body>
57 <div id="wraper">
58 <div class="Head">
59 <h3>图书分类</h3>
60 <span><img src="Images/a2.gif" alt=""/></span>
61 </div>
62 <div class="Content">
63 <ul>
64 <li><a href="#">小说</a><i>(1000)</i></li>
65 <li><a href="#">文艺</a><i>(1000)</i></li>
66 <li><a href="#">知音</a><i>(1000)</i></li>
67 <li><a href="#">少儿</a><i>(1000)</i></li>
68 <li><a href="#">生活</a><i>(1000)</i></li>
69 <li><a href="#">社科</a><i>(1000)</i></li>
70 <li><a href="#">广利</a><i>(1000)</i></li>
71 <li><a href="#">美女</a><i>(1000)</i></li>
72 <li><a href="#">儿童</a><i>(1000)</i></li>
73 <li><a href="#">老人</a><i>(1000)</i></li>
74 <li><a href="#">少年</a><i>(1000)</i></li>
75 <li><a href="#">青年</a><i>(1000)</i></li>
76 <li><a href="#">成年</a><i>(1000)</i></li>
77 <li><a href="#">女人</a><i>(1000)</i></li>
78 <li><a href="#">父亲</a><i>(1000)</i></li>
79 <li><a href="#">木青</a><i>(1000)</i></li>
80 <li><a href="#">母亲</a><i>(1000)</i></li>
81 <li><a href="#">妹妹</a><i>(1000)</i></li>
82 <li><a href="#">其他</a><i>(1000)</i></li>
83
84 </ul>
85 </div>
86 <div class="Bot">
87 <a href="#">更多</a>
88 <img src="Images/a6.gif" />
89 </div>
90 </div>
91 </body>
92 </html>
代码很简单。
