1.如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script> <script> var i=false; $(document).ready(function(){ $("#p1").addClass("div1"); $("button").click(function(){ if(!i) { i=true; } else { i=false; } if(!i) { $("#p1").show(1000);//设置显示过程的时间 } else { $("#p1").hide(1000);//设置隐藏过程中的时间 } }); }) </script> <style> .div1 { 200px; height: 200px; background-color: red; } </style> <title>jqueryhideshow</title> </head> <body> <div id="p1"> </div> <button>这是一个按钮</button> </body> </html>
2.如下所示,用toggle事件代替show与hide
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>showhide切换</title> <script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script> <script> $(document).ready(function(){ $("#p1").addClass("div1"); $("button").click(function(){ $("#p1").toggle(1000);//toggle键根据按键的单双次数在show()和hide()之间切换 }); }) </script> <style> .div1 { 200px; height: 200px; background-color:red; } </style> </head> <body> <button>这是一个按钮</button> <div id="p1"></div> </body> </html>