js实现内容模块展开和收缩

最新推荐文章于 2023-08-26 09:16:17 发布

aoyin1017

最新推荐文章于 2023-08-26 09:16:17 发布

阅读量540

点赞数

原文链接：http://www.cnblogs.com/songfayuan/articles/7398951.html

版权

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js实现内容模块展开和收缩</title>
 6     <style>
 7         p{
 8             width: 400px;
 9             margin: 40px auto;
10             border: 5px solid yellow;
11             padding: 20px;
12         }
13     </style>
14     <script>
15         window.onload = function () {
16             var span = document.getElementsByTagName("span")[0];
17             console.log(span);
18             var btn = document.getElementsByTagName("a")[0];
19             //拿到所有文字
20             var str = span.innerHTML;
21             //设置一个开关，记录展开和收缩
22             var isOn = true;
23             //btn添加事件，在事件里修改span文字
24             btn.onclick = function () {
25                //点击按钮的时候改变开关的值
26                 isOn  = !isOn;
27                 if(isOn == true){
28                     span.innerHTML = str;
29                     btn.innerHTML = "收缩";
30                 }else{
31                     //收缩
32                     span.innerHTML = str.substring(0, 30)+"...";
33                     btn.innerHTML = "展开";
34                 }
35             }
36         }
37     </script>
38 </head>
39 <body>
40 
41     <p>
42         <span>
43             刚好遇见你，余生都是你
44 
45 ------愿每一个等待的人最后都能精诚开，愿每一个去爱的人都能被温柔待。
46 
47 今生今世，你负责美丽，我负责爱你。其他无能为力的交给风，交给雨，交给蓝天白云，交给大地海洋。
48 
49 今生今世，愿世界对你温柔深情以待。免你惊，免你苦，免你四下流离，免你无枝可依。
50 
51 不知何时起，你成了我心中守口如瓶的一个秘密，我不会再向别人分享你的消息，也不愿与别人分享你生命里的点点滴滴。
52 
53 爱本就是自私的，不自私的爱还算爱吗？我很自私的想让你留在身边，于现在牵手于未来白头。
54 
55 我再爱你，亦不能替你做任何决定，也无力想去改变你的脾气。
56 
57 仔细想来不如索性对如风的你三缄其口，对生活赐予的一切照单全收。
58 
59 我相信每一个等待的人最后都能精诚开，每一个去爱的人都能被温柔待；
60 
61 每一个努力的人都会有所收，每一对相爱的人都能到最后。
62 
63 等我们年迈蹉跎，步履缓慢，家庭和睦美满，儿女承欢膝下。
64 
65 等我们颐养天年，不再为功名奔波，不再为生计忙碌。
66 
67 若我还能鼓起勇气，若你还愿洗耳恭听，依然会说我爱你。
68 
69 用我那牙口不全的嘴唇，吻你依然美丽的脸颊。
70 
71 我会洗去一身风尘疲惫，满脸回忆的向你说起我们的前尘往事。
72 
73 说一个从年少到迟暮，从青年到老去属于我们相知相爱的故事。
74 
75 你是莞尔失笑，还是潸然泪下，亦或是挽起我的手臂，如现在一样的幸福甜蜜。
76         </span>
77         <a href="javascript:;">收缩</a>
78     </p>
79 
80 </body>
81 </html>

转载于:https://www.cnblogs.com/songfayuan/articles/7398951.html

aoyin1017

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现内容模块展开和收缩

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js实现内容模块展开和收缩</title> 6 <style> 7 ...
复制链接

扫一扫