本來是想做一個滑鼠點擊事件：A,B兩個東西，B先隱藏，點擊A，B出現，再點一次A，B消失，然後發現在判斷不同的情況下，出現了一點小問題 暫時沒有問題的寫法： 然後，我把它的判斷條件改了一下,其實這是我第一次寫的想法： 然後它的效果是，第一次點擊的時候沒有反應，要點第二次，B才會出來，有點不明白 ...
本來是想做一個滑鼠點擊事件：A,B兩個東西，B先隱藏，點擊A，B出現，再點一次A，B消失，然後發現在判斷不同的情況下，出現了一點小問題
暫時沒有問題的寫法：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #div1{ 8 width: 50px; 9 height: 200px; 10 background-color: orange; 11 display: none; 12 } 13 </style> 14 <script type="text/javascript"> 15 function showHide(){ 16 var a=document.getElementById("div1") 17 if (a.style.display=="block") { 18 a.style.display="none"; 19 } 20 else{ 21 a.style.display="block"; 22 } 23 } 24 </script> 25 </head> 26 <body> 27 <input type="button" value="顯示隱藏" onclick="showHide()"> 28 <div id="div1"></div> 29 </body> 30 </html>
然後，我把它的判斷條件改了一下,其實這是我第一次寫的想法：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #div1{ 8 width: 50px; 9 height: 200px; 10 background-color: orange; 11 display: none; 12 } 13 </style> 14 <script type="text/javascript"> 15 function showHide(){ 16 var a=document.getElementById("div1") 17 // 這裡改變了 18 if (a.style.display=="none") { 19 a.style.display="block"; 20 } 21 else{ 22 a.style.display="none"; 23 } 24 } 25 </script> 26 </head> 27 <body> 28 <input type="button" value="顯示隱藏" onclick="showHide()"> 29 <div id="div1"></div> 30 </body> 31 </html>
然後它的效果是，第一次點擊的時候沒有反應，要點第二次，B才會出來，有點不明白
