这个栗子……
可以不吃，先预设一个变量表示div的状态，例子中0是显示的，一开始是隐藏的。当点击时判断状态是显示0的还是隐藏1的；如果是显示的就把div隐藏，再把变量改变为1。再次点击时把会判断到变量是隐藏的，就会走显示那条路。
<!-- Author: XiaoWen Create a file: 2016-12-07 10:09:27 Last modified: 2016-12-07 10:21:28 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击显示和隐藏</title> <style> div{ width: 100px; height: 100px; background: #eee; } </style> </head> <body> <button> 显示/隐藏 </button> <div>受罪的div，想隐藏就隐藏</div> <script> var but=document.getElementsByTagName("button"); var div=document.getElementsByTagName("div"); var temp=0; //0为显示 but[0].onclick=function(){ if(temp==0){ //本来是显示的，所以就隐藏咯 div[0].style="display:none"; temp=1; //隐藏了就把状态改变了 }else{ div[0].style="display:block"; temp=0; } } </script> </body> </html>
w3c上有个开关灯的例子，是直接判断src路径中的字符来显示不同的图片。
使用取余 %
var but=document.getElementsByTagName("button"); var div=document.getElementsByTagName("div"); var temp=0; //0为显示 but[0].onclick=function(){ if(temp%2==0){ //本来是显示的，所以就隐藏咯 div[0].style="display:none"; }else{ div[0].style="display:block"; } temp++ }
使用布尔和非
var but=document.getElementsByTagName("button"); var div=document.getElementsByTagName("div"); var b=true; but[0].onclick=function(){ if(b){ div[0].style="display:none"; }else{ div[0].style="display:block"; } b=!b //把 true 变为 false 并赋给原来的变量 }
期待此栗子的更有味的做法。
相似例子：
勾选时显示相应内容：http://www.cnblogs.com/daysme/articles/6140303.html