2.6 案例研究—某网站品牌列表的效果
2.6 案例研究—某网站品牌列表的效果
以下是某网站上的一个品牌列表的展示效果，用户进入该页面时，品牌列表默认是精简显示的（即不完整的品牌列表），如图2-6所示。
用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。
单击“显示全部品牌”按钮的同时，列表会将推荐的品牌的名字高亮显示，按钮里的文字也换成了“精简显示品牌”，如图2-7所示。
[插图]
[插图]
再次单击“精简显示品牌”按钮，即又回到图2-6所示的页面。
为了实现这个例子，首先需要设计它的HTML结构。HTML代码如下：
[插图]
然后为上面的HTML代码添加CSS样式。页面初始化的效果如图2-8所示。
接下来为这个页面添加一些交互效果，要做的工作有以下几项。
[插图]
（1）从第7条开始隐藏后面的品牌（最后一条“其它品牌相机”除外）。
（2）当用户单击“显示全部品牌”按钮时，将执行以下操作。
① 显示隐藏的品牌。
② “显示全部品牌”按钮文本切换成“精简显示品牌”。
③ 高亮推荐品牌。
（3）当用户单击“精简显示品牌”按钮时，将执行以下操作。
① 从第7条开始隐藏后面的品牌（最后一条“其它品牌相机”除外）。
② “精简显示品牌”按钮文本切换成“显示全部品牌”。
③ 去掉高亮显示的推荐品牌。
（4）循环进行第（2）步和第（3）步。
下面逐步来完成以上的效果。
（1）从第7条开始隐藏后面的品牌（最后一条“其它品牌相机”除外）。
[插图]
$('ul li:gt(5):not(:last)')的意思是先获取<ul>元素下索引值大于5的<li>元素的集合元素，然后去掉集合元素中的最后一个元素。这样，即可将从第7条开始至倒数第2条的所有品牌都获取到。最后通过hide()方法隐藏这些元素。
（2）当用户单击“显示全部品牌”按钮时，执行以下操作。
首先获取到按钮，代码如下：
[插图]
然后给按钮添加事件，使用show()方法把隐藏的品牌列表显示出来，代码如下：
[插图]
由于给超链接添加onclick事件，因此需要使用“return false”语句让浏览器认为用户没有单击该超链接，从而阻止该超链接跳转。
之后，需要将“显示全部品牌”按钮文本切换成“精简显示品牌”，代码如下：
[插图]
这里完成了两步操作，即把按钮的背景图片换成向上的图片，同时也改变了按钮文本内容，将其替换成“精简显示品牌”。
接下来需要高亮推荐品牌，代码如下：
[插图]
使用filter()方法筛选出符合要求的品牌，然后为它们添加promoted样式。在这里推荐了3个品牌，即佳能、尼康和奥林巴斯。
此时，完成的jQuery代码如下：
[插图]
运行上面的代码，单击“显示全部品牌”按钮后，显示图2-9所示的效果，此时已经能够正常显示全部品牌了。
[插图]
- show()：显示隐藏的匹配元素。
- css(name,value)：给元素设置样式。
- text(string)：设置所有匹配元素的文本内容。
- filter(expr)：筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。注意区分它和find()方法。find()会在元素内寻找匹配元素，而filter()则是筛选元素。一个是对它的子集操作，一个是对自身集合元素进行筛选。
- addClass(class)：为匹配的元素添加指定的类名。
（3）当用户单击“精简显示品牌”按钮时，将执行以下操作。
由于用户单击的是同一个按钮，因此事件仍然是在刚才的按钮元素上。要将切换两种状态的效果在一个按钮上进行，可以通过判断元素的显示或者隐藏来达到目的，代码结构如下：
[插图]
代码②就是第（2）步的内容，接下来只需要完成代码①的内容即可。
在jQuery中，与show()方法相反的是hide()方法，因此可以使用hide()方法将品牌隐藏起来，代码如下：
[插图]
然后将“精简显示品牌”按钮文本切换成“显示全部品牌”，同时按钮图片换成向下的图片，这一步与前面类似，只不过是图片路径和文本内容不同而已，代码如下：
[插图]
接下来需要去掉所有品牌的高亮显示状态，此时可以使用 removeClass()方法来完成，代码如下：
[插图]
它将去掉所有<li>元素上的“promoted”样式，即去掉了品牌的高亮状态。
至此完成代码①。
最后通过判断元素是否显示来分别执行代码①和代码②，代码如下：
[插图]
之后即可将代码①和代码②插入相应的位置。jQuery代码如下：
[插图]
至此任务完成，完整的jQuery代码如下：
[插图]
运行代码后，单击按钮，品牌列表会在“全部”和“精简”两种效果之间循环切换，显示效果如图2-10和图2-11所示。
[插图]
[插图]
在 jQuery 中有一个方法更适合上面的情况，它能给一个按钮添加一组交互事件，而不需要像上例一样去判断，上例的代码如下：
[插图]
如果改成toggle()方法，代码则可以直接写成以下形式：
[插图]
当单击按钮后，脚本会对代码③和代码④进行交替处理。
jQuery还提供了很多简单易用的方法，上面讲解的toggle()方法只是其中的一种，这些方法将在后面的章节中进行详细介绍。