查看本章节
需求说明：
- 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
- 具体要求如下：
- 在页面中显示电影排行榜
- 当单击“（收起）”链接时，排行榜中后三项的电影名称隐藏而且链接的文本更改为“（展开）
- ” 当单击“（展开）”的链接时，后三项的电影名称重新显示且链接的文本更改为“（收起）”
实现思路：
- 新建 HTML 页面，使用 <h3> 和 <ul> 等标签制作页面加载时的初始效果
- 在页面加载完毕事件中，给 <a href="#">（收起）</a> 标签的单击事件绑定方法
- 在 <a> 标签的点击事件方法中判断无序列表的后三项是否可见。若可见，利用 css() 方法把后三项的display 属性设置成“none”，再利用 text() 方法，改变 <a> 标签的文本为“展开”；若不可见，利用 css() 方法把后三项的 display 属性设置成“list-item”，再利用 text() 方法，改变 <a> 标签的文本为“收起”
实现代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("a[href='#']").click(function(){var flag = $("ul li:gt(4)").is(":visible");if (flag) {$("ul li:gt(4)").css("display","none")$(this).text("(展开)")} else{$("ul li:gt(4)").css("display","list-item")$(this).text("(收起)")}})})</script></head><body><h3>影视排行榜<a href="#">(收起)</a></h3><ul><li>捉妖记 2</li><li>战狼 2</li><li>奇门遁甲</li><li>猫妖传</li><li>时空终点</li><li>前任3：再见前任</li><li>冰雪奇缘</li><li>极品飞车</li></ul></body>
</html>
