1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>click_div</title> 5 <meta charset="utf-8"> 6 7 <style type="text/css"> 8 .triangle1{ 9 width: 0; 10 height: 0; 11 border-width: 10px; 12 border-style: solid; 13 border-color: #bbb transparent transparent transparent; 14 /*border-color: transparent transparent #bbb transparent;*/ 15 display: inline-block; 16 vertical-align: middle; 17 } 18 .triangle2{ 19 width: 0; 20 height: 0; 21 border-width: 10px; 22 border-style: solid; 23 /*border-color: #bbb transparent transparent transparent;*/ 24 border-color: transparent transparent #bbb transparent; 25 display: inline-block; 26 vertical-align: middle; 27 } 28 a{ 29 width: 116px; 30 height: 20px; 31 margin: 0; 32 padding: 0; 33 font-size: 5px; 34 } 35 .hidden{ 36 display: none; 37 } 38 .shown{ 39 display: block; 40 } 41 </style> 42 43 <script type="text/javascript"> 44 // 方法一 45 // function change(){ 46 // var mButton=document.getElementById("form_triangle"); 47 // mButton.onclick = function() { 48 // if(document.getElementById("form_triangle").className==="triangle1"){ 49 // document.getElementById("form_triangle").className="triangle2" 50 // document.getElementById("form_a").className="shown" 51 // }else{ 52 // document.getElementById("form_triangle").className="triangle1" 53 // document.getElementById("form_a").className="hidden" 54 // } 55 // document.body.focus(); 56 // } 57 // } 58 // window.onload=function(){ 59 // change(); 60 // } 61 62 // 方法二 63 function change(){ 64 var triangle = document.getElementById("form_triangle"); 65 var a = document.getElementById("form_a"); 66 if(triangle.className==="triangle1"){ 67 triangle.className="triangle2"; 68 a.style="display: block"; 69 }else{ 70 triangle.className="triangle1"; 71 a.style="display: none"; 72 } 73 } 74 75 </script> 76 77 </head> 78 79 <body> 80 <div> 81 我已阅读并同意相关服务条款和隐私政策 82 <div id="form_triangle" class="triangle1" onclick="change()"></div> 83 <div id="form_a" class="hidden"> 84 <a href="#">《QQ号码规则》</a><br /> 85 <a href="#">《隐私政策》</a><br /> 86 <a href="#">《QQ空间服务协议》</a> 87 </div> 88 </div> 89 </body> 90 91 </html>