点击(此处)折叠或打开
- <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
- <html xmlns=\"http://www.w3.org/1999/xhtml\">
- <head>
- <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
- <title>合成事件toggle</title>
- <script src=\"/ajaxjs/jquery1.3.2.js\" type=\"text/javascript\"></script>
- <style>
- *{margin:0;padding:0;}
- body { font-size: 13px; line-height: 130%; padding: 60px }
- #panel { width: 300px; border: 1px solid #0050D0 }
- .head { padding: 5px; background: #96E555; cursor: pointer }
- .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }
- </style>
- <style type=\"text/css\">
- .highlight{ background:#FF3300; }
- </style>
- <script type=\"text/javascript\">
- $(function(){
- $(\"#panel h5.head\").toggle(function(){
- $(this).addClass(\"highlight\");
- $(this).next(\"div.content\").show();
- },function(){
- $(this).removeClass(\"highlight\");
- $(this).next(\"div.content\").hide();
- });
- })
- </script>
- </head>
- <body>
- <div id=\"panel\">
- <h5 class=\"head\">什么是jQuery?</h5>
- <div class=\"content\">
-
- </div>
- </div>
- </body>
- </html>
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29737856/viewspace-1224394/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/29737856/viewspace-1224394/