有html页面内容如下：
<body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1">jQuery是一门前端编程语言</p> </body>
需要实现点击标题显示和隐藏段落的功能。
第一种通过点击方法实现，代码如下，需要注意is(":visible")的使用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../script/jquery-2.1.4.js"></script> <title></title> <script> $(function(){ $("#hh").click(function(){ if($(this).next().is(":visible")){ $(this).next().hide(); } else{ $(this).next().show(); } }); }); </script> </head> <body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1">jQuery是一门前端编程语言</p> </body> </html>
第二种方法通过toggle使用，当toggle代码如下时，效果是先出现一段文字
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../script/jquery-2.1.4.js"></script> <title>toggle</title> <script> $(function(){ $("#hh").toggle(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }) }) </script> </head> <body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1">jQuery是一门前端编程语言</p> </body> </html>
而要实现点击切换的效果，新的jQuery代码应该是：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../script/jquery-2.1.4.js"></script> <title>toggle</title> <script> $(function(){ $("#hh").click(function(){ $(this).next().toggle(600); },function(){ $(this).next().toggle(600); }) }) </script> </head> <body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1">jQuery是一门前端编程语言</p> </body> </html>