1 var btn = document.getElementById("btn"), show = document.getElementById("content"), count = 0; 2 btn.onmouseover = function(){ 3 console.log(this) 4 this.style.cssText = "cursor : pointer;"; 5 }; 6 btn.onclick = function(e){ 7 console.log(count); 8 if(count %2 == 0){ 9 //show.className += " pp"; 10 addClass(show, "pp"); 11 console.log("添加") 12 show.style.cssText = ";position : static;"; 13 }else{ 14 removeClass(show, "pp"); 15 show.style.cssText = "display : none"; 16 } 17 18 count ++; 19 }; 20 21 function addClass( elements,cName ){ 22 if( !hasClass( elements,cName ) ){ 23 elements.className += " " + cName; 24 } 25 } 26 27 function hasClass( elements,cName ){ 28 return !!elements.className.match( new RegExp( "(\s|^)" + cName + "(\s|$)") ); 29 // ( \s|^ ) 判断前面是否有空格 （\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断 30 } 31 function removeClass( elements,cName ){ 32 if( hasClass( elements,cName ) ){ 33 elements.className = elements.className.replace( new RegExp( "(\s|^)" + cName + "(\s|$)" )," " ); // replace方法是替换 34 console.log("移除"); 35 } 36 }
1 <div class="wrap cc"> 2 <div class="hd"> 3 <h3 id="btn">我是可耻的h3 标题</h3> 4 </div> 5 <div class="bd"> 6 <div id="content" class="content"></div> 7 </div> 8 <p>dont show before me again!!!</p> 9 <p>dont show before me again!!!</p> 10 <p>dont show before me again!!!</p> 11 <p>dont show before me again!!!</p> 12 <p>dont show before me again!!!</p> 13 <p>dont show before me again!!!</p> 14 <p>dont show before me again!!!</p> 15 <p>dont show before me again!!!</p> 16 <p>dont show before me again!!!</p> 17 <p>dont show before me again!!!</p> 18 <p>dont show before me again!!!</p> 19 <p>dont show before me again!!!</p> 20 <p>dont show before me again!!!</p> 21 <p>dont show before me again!!!</p> 22 <p>dont show before me again!!!</p> 23 <p>dont show before me again!!!</p> 24 <p>dont show before me again!!!</p> 25 <p>dont show before me again!!!</p> 26 <p>dont show before me again!!!</p> 27 <p>dont show before me again!!!</p> 28 <p>dont show before me again!!!</p> 29 <p>dont show before me again!!!</p> 30 <p>dont show before me again!!!</p> 31 <p>dont show before me again!!!</p> 32 <p>dont show before me again!!!</p> 33 <p>dont show before me again!!!</p> 34 <p>dont show before me again!!!</p> 35 <p>dont show before me again!!!</p> 36 <p>dont show before me again!!!</p> 37 <p>dont show before me again!!!</p> 38 <p>dont show before me again!!!</p> 39 <p>dont show before me again!!!</p> 40 </div>