极速小乌龟

导航

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

 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>

 

posted on 2017-08-09 14:41  极速小乌龟  阅读(242)  评论(0)    收藏  举报