原生JS仿QQ阅读点击展开、收起效果
5 浏览量
2020-12-01
15:37:30
上传
评论
收藏 92KB PDF 举报
原生原生JS仿仿QQ阅读点击展开、收起效果阅读点击展开、收起效果
使用JS技术实现QQ阅读类似的点击展开、收起效果，具体内容如下
一、定义展开函数showdiv(),实现点击”全文”按钮，全文展开。
1.点击展开函数，需要将触发点击事件的按钮作为参数传入
2.通过传入的按钮，查找其父元素，将其父元素设置为隐藏。
3.将紧跟其父元素之后的元素设置为显示。
二、定义收起函数hidediv(),实现点击”收起全文”按钮，全文内容隐藏。
1.点击收起函数，需要将触发点击事件的按钮作为参数传入
2.通过传入的按钮，查找其父元素，将其父元素设置为隐藏。
3.将紧跟其父元素之前的元素设置为显示。
注意：注意：为了浏览器兼容，一定要判断找到的节点nodeType是否为元素节点。
效果如图：
具体代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body
{
margin: 0 auto;
padding: 0;
font-size: 9pt;
line-height: 180%;
}
#pn
{
background: #f8f8f8;
height: auto;
width: 750px;
margin: 0 auto;
padding: 5px;
}
.artTitle
{
font-weight: bold;
color: #3030FF;
font-size: 11pt;
}
.subTitle
{
color: #CCC;
}
.content
{
border: 1px solid #CCC;
display: none;
padding: 5px;
}
.btm
评论0