Question

以下是某网站上的一个品牌列表的展示效果，用户进入该页面时，品牌列表默认是精简显示的（即不完整的品牌列表），如图2-6所示。

图2-6　品牌展示列表（精简）

用户可以单击商品列表下方的显示全部品牌按钮来显示全部的品牌。

单击显示全部品牌按钮的同时，列表会将推荐的品牌的名字高亮显示，按钮里的文字也换成了精简显示品牌，如图2-7所示。

图2-7　品牌展示列表（全部）

再次单击精简显示品牌按钮，即又回到图2-6所示的页面。

为了实现这个例子，首先需要设计它的HTML结构。HTML代码如下：

然后为上面的HTML代码添加CSS样式。

图2-8　品牌展示列表（精简）

页面初始化的效果如图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所示的效果，此时已经能够正常显示全部品牌了。

图2-9　当按钮被单击后

注意：上面代码中用到的几个jQuery方法的意思如下：

　show()：显示隐藏的匹配元素。

　css(name，value)：给元素设置样式。

　text(string)：设置所有匹配元素的文本内容。

　filter(expr)：筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。注意区分它和find()方法。find()会在元素内寻找匹配元素，而filter()则是筛选元素。一个是对它的子集操作，一个是对自身集合元素进行筛选。

　addClass(class)：为匹配的元素添加指定的类名。

（3）当用户单击精简显示品牌按钮时，将执行以下操作。

由于用户单击的是同一个按钮，因此事件仍然是在刚才的按钮元素上。要将切换两种状态的效果在一个按钮上进行，可以通过判断元素的显示或者隐藏来达到目的，代码结构如下：

代码②就是第（2）步的内容，接下来只需要完成代码①的内容即可。

在jQuery中，与show()方法相反的是hide()方法，因此可以使用hide()方法将品牌隐藏起来，代码如下：

然后将精简显示品牌按钮文本切换成显示全部品牌，同时按钮图片换成向下的图片，这一步与前面类似，只不过是图片路径和文本内容不同而已，代码如下：

接下来需要去掉所有品牌的高亮显示状态，此时可以使用removeClass()方法来完成，代码如下：

它将去掉所有<li>元素上的promoted样式，即去掉了品牌的高亮状态。

注意：removeClass(class)的功能和addClass(class)的功能正好相反。addClass(class)的功能是为匹配的元素添加指定的类，而removeClass(class)则是从匹配的元素中删除指定的类。

至此完成代码①。

最后通过判断元素是否显示来分别执行代码①和代码②，代码如下：

之后即可将代码①和代码②插入相应的位置。jQuery代码如下：

至此任务完成，完整的jQuery代码如下：

运行代码后，单击按钮，品牌列表会在全部和精简两种效果之间循环切换，显示效果如图2-10和图2-11所示。

图2-10　精简模式

图2-11　全部模式

在jQuery中有一个方法更适合上面的情况，它能给一个按钮添加一组交互事件，而不需要像上例一样去判断，上例的代码如下：

如果改成toggle()方法，代码则可以直接写成以下形式：

当单击按钮后，脚本会对代码③和代码④进行交替处理。

jQuery还提供了很多简单易用的方法，上面讲解的toggle()方法只是其中的一种，这些方法将在后面的章节中进行详细介绍。

注意：在本例中，如果用户禁用了JavaScript的功能，品牌列表仍然能够完全显示，当用户单击显示全部品牌按钮的时候，会跳转到more.html页面来显示品牌列表。作为一名专业的开发者，必须要考虑到禁用或者不支持JavaScript的浏览器（用户代理）。另外，这点对于搜索引擎优化也特别有帮助，毕竟当前的搜索引擎爬虫基本都不支持JavaScript。