点击显示余下内容-没有定时器

点击展开效果的HTML页面

最新推荐文章于 2023-02-08 08:59:18 发布

weixin_33709609

最新推荐文章于 2023-02-08 08:59:18 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/longly/p/7325178.html

本文介绍了一个简单的HTML页面实现点击元素后展示隐藏内容的效果。通过JavaScript监听点击事件并切换CSS类来达到显示隐藏内容的目的。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style>
 6         /*class=reveal 的元素的子元素都不显示*/
 7         .reveal *{display: none;}
 8         .reveal *.handle{display: block;}
 9     </style>
10     <title>客户端</title>
11 </head>
12 <body>
13 <script>
14     //所有的页面逻辑在onload事件之后启动
15     window.onload=function(){
16         //找打所有class名为"reveal"的容器元素
17         var elements=document.getElementsByClassName("reveal");
18         //对每个元素进行遍历
19         for(var i=0; i<elements.length;i++){
20             var elt=elements[i];
21             //找到容器中的handle元素
22             var title=elt.getElementsByClassName("handle")[0];
23             //当点击这个元素时，呈现剩下的内容
24             addRevealHandler(title,elt); //加载函数
25         }
26         function addRevealHandler(title,elt){
27             title.onclick=function(){
28                 if(elt.className=="reveal")
29                 elt.className="revealed";
30                 else if(elt.className=="revealed")
31                 elt.className="reveal";
32             }
33         }
34     };
35 </script>
36 <div class="reveal">
37     <h1 class="handle">点击发生奇怪的事情</h1>
38     <p>惊喜吧意外吧。哈哈</p>
39 </div>
40 </body>
41 </html>