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 >

代码很简单。

转载于:https://www.cnblogs.com/blacksheep/archive/2011/04/09/2010865.html