案例研究
1. 用户进入该页面时，品牌列表默认是精简显示的(即不完整的品牌列表)。
2. 用户可以单击商品列表下方的
"显示全部品牌"
按钮来显示全部的品牌。
单击
"显示全部品牌"
按钮的同时，列表会将推荐的品牌的名字高亮显示，按钮里德文字也换成了
"精简显示品牌"
。
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title></title>
<style type=
"text/css"
>
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block;
float
:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<!-- 引入jQuery -->
<script type=
"text/javascript"
>
$(function(){
// 等待DOM加载完毕.
var $category = $(
'ul li:gt(5):not(:last)'
);
// 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide();
// 隐藏上面获取到的jQuery对象。
var $toggleBtn = $(
'div.showmore > a'
);
// 获取“显示全部品牌”按钮
$toggleBtn.click(function(){
if
($category.
is
(
":visible"
)){
$category.hide();
// 隐藏$category
$(
'.showmore a span'
)
.css(
"background"
,
"url(img/down.gif) no-repeat 0 0"
)
.text(
"显示全部品牌"
);
//改变背景图片和文本
$(
'ul li'
).removeClass(
"promoted"
);
// 去掉高亮样式
}
else
{
$category.show();
// 显示$category
$(
'.showmore a 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>(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=
"more.html"
><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
(1)从第7条开始隐藏后面的品牌(最后一条
"其它品牌机箱"
除外)。
(2)当用户单击
"显示全部品牌"
按钮时，将执行以下操作。
1.显示隐藏的品牌。
2.
"显示全部品牌"
按钮文本切换成
"精简显示品牌"
。
3. 高亮推荐品牌。
(3)当用户单击"精简显示品牌'按钮时，将执行以下操作。
1.从第5条开始隐藏后面的品牌(最后一条
"其他品牌相机"
除外)。
2.精简显示品牌 按钮文本切换为
"显示全部品牌"
3.去掉高亮显示的推荐品牌。
(4)循环进行(2)步和第(3)步
下面逐步来完成以上的效果。
(1)从第5条开始隐藏后面的品牌(最后一条
"其他品牌相机"
除外)。
var $category = $(
'ul li:gt(5):not(:last)'
);
$category.hide();
//隐藏上面获到的jQuery对象
$(ul li:gt(5):not(:last))的意思是先后去<ul>元素下索引值大于5的<li>元素的集合元素，
然后去掉集合元素中的最后一个元素。这样，既可将从第7条开始至倒数第2条的所有品牌都获取到。
最后通过hide()方法隐藏这些元素。
(2)当用户单击
"显示全部品牌"
按钮时，执行以下操作，首先获取到按钮，代码如下：
var $togglebtn = $(
'div.showmore>a'
);
//获取 "显示全部品牌" 按钮
然后给按钮添加事件，使用show()方法吧隐藏的品牌列表显示出来。
$toggleBtn=$(
'div.showmore>a'
);
//获取"显示全部品牌" 按钮
然后给按钮添加事件，使用show() 方法把隐藏的品牌列表显示出来
$toggleBtn.click(function(){
$category.show();
return
false
;
});
由于给超链接添加onclick事件，因此需要使用
"return false"
语句让浏览器认为用户没有点击该超级链接，从而阻止该超级链接跳转，之后，需要将
"显示全部品牌"
按钮文本切换成
"精简显示品牌"
$(
".showmore a span"
)
.css(
"background"
,
"url(img/up.gif) no-repeat 0 0 "
)
.text(
"精简显示品牌"
);
这里完成了两部操作，即把按钮的背景色的图片换为向上的图片，同时也改变了按钮文本内容，将其替换为
"精简显示品牌"
。
$(
'ul li'
).filter(
":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')"
)
.addClass(
"promoted"
);
//添加高亮样式
使用filter()方法筛选出符合要求的品牌，然后为他们添加promoted样式。在这里推荐了3个品牌。
$(function(){
//等待Dom加载完毕
var $category = $(
'ul li:gt(5):not(:last)'
);
// 获得索引值大于5的品牌集合对象(除最后一条);
$category.hide();
//隐藏上面获取到的jQuery对象
var $toggleBtn = $(
'div.showmore>a'
);
$toggleBtn.click(function(){
$category.show();
$(
'.showmore a span'
)
.css(
"background"
,
"url(img/up.gif) no-repeat 0 0"
)
.text(
"精简显示品牌"
);
$(
'ul li'
).filter(
":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')"
)
.addClass(
"promoted"
);
return
false
;
})
});
在jQuery中有一个方法更适合上面的情况，它能给一个按钮加一组交互事件，而不需要像上例一样去判断，上列的代码如下:
|
toggleBtn.click(function(){
|
if
($category.
is
(
":visible"
)){
|
//代码隐藏 code
|
}
else
{
|
//元素显示 code
|
}});
|
如果改为toggle()方法，代码则可以直接写成以下形式:
|
$toggleBtn.toggle(function(){
|
//toggle()方法用来交替一组动作 //显示元素
|
},function(){
|
//隐藏元素
|
});<br>
|
<br>
|
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
