本来是想做一个鼠标点击事件：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才会出来，有点不明白