首页 > 代码库 > 点击显示余下内容-没有定时器
点击显示余下内容-没有定时器
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>
点击显示余下内容-没有定时器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。