使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

使用 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 

 li 捉妖记 2 /li 

 li 战狼 2 /li 

 li 奇门遁甲 /li 

 li 猫妖传 /li 

 li 时空终点 /li 

 li 前任3 再见前任 /li 

 li 冰雪奇缘 /li 

 li 极品飞车 /li 

 /ul 

 /body 

 /html