myCourse

实验六、某电商网站品牌列表的效果

实验背景

如京东，淘宝的品牌列表，当待显示的内容过多时，一般会首先显示部分品牌，希望显示全部品牌时，再显示全部品牌。

实验目的

• 掌握如何使用 jQuery 获取制定的元素
• 掌握使用 jQuery 显示和隐藏元素的方法（hide() 和 show()）。
• 掌握事件在 jQuery 中的用法
• 掌握修改元素文本内容的方式

实验分析

显示或隐藏元素，一般分两种方式实现：

• 把需要切换显示状态的元素，先隐藏或显示出来，当触发某个事件时，更改元素的显示状态。
• 页面中先加载一直显示的元素，暂时不需要显示的，先不加载，当需要显示更多信息时，再去加载元素到文档中

本实验，通过第一种方式实现元素的显示或隐藏效果。第二种方式，请同学们自己研究探索

实验步骤

步骤一：准备素材

• 图片素材；
• jQuery 文件；

步骤二：实验目录结构

步骤三：搭建 HTML 结构和设计 CSS 样式

步骤四：隐藏部分品牌

• 获取要隐藏的品牌：ul 列表中大于 5 的 li，并且不是最后一个 li；
• 隐藏获取到的元素；

步骤五：用户点击“显示全部品牌”元素时，显示全部品牌

• 获取“显示全部品牌”元素；
• 给“显示全部品牌”元素添加单击事件；
• 单击事件触发时，显示隐藏列表，并将“显示全部品牌”元素上的文字替换成“精简显示品牌”

步骤六：用户点击“精简显示品牌”时，显示部分品牌

• 触发单击事件时，判断可能隐藏的品牌元素的显示状态。
• 若品牌列表处于隐藏状态，则点击“显示全部品牌”元素时，隐藏元素的显示状态为可见，并且按钮上的文字变为“精简显示品牌”。
• 若品牌列表处于显示状态，则点击“精简显示品牌”元素时，隐藏元素的显示状态变为隐藏，并且按钮上的文字变成“显示全部品牌”。