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

查看本章节

查看作业目录


需求说明:

  1. 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
  2. 具体要求如下:
  • 在页面中显示电影排行榜
  • 当单击“(收起)”链接时,排行榜中后三项的电影名称隐藏而且链接的文本更改为“(展开)
  • ” 当单击“(展开)”的链接时,后三项的电影名称重新显示且链接的文本更改为“(收起)”

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

实现思路:

  1. 新建 HTML 页面,使用 <h3> 和 <ul> 等标签制作页面加载时的初始效果
  2. 在页面加载完毕事件中,给 <a href="#">(收起)</a> 标签的单击事件绑定方法
  3. 在 <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>
上一篇:python 脚本之 IP地址探测


下一篇:Android中的动画效果