1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>第1章示例1</title> 6 <style type="text/css"> 7 body { width:760px; } 8 div { float:left; width:200px; margin:10px 20px; font-family:\5FAE\8F6F\96C5\9ED1; } 9 h3 { cursor:pointer; margin:0; border:1px solid black; color:white; background-color:green; } 10 ul { list-style:none; margin:5px 0; padding:5px 0; border:1px dotted black; background-color:gold; display:none; } 11 .highlight{ color:black; background-color:gold; } 12 </style> 13 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 14 <script type="text/javascript"> 15 $(document).ready(function(){ 16 $("h3").click(function(){ 17 $(this).toggleClass("highlight") 18 .next("ul").toggle(); 19 }); 20 }); 21 </script> 22 </head> 23 <body> 24 <div> 25 <h3>主题一（点击我）</h3> 26 <ul> 27 <li>内容段落1</li> 28 <li>内容段落2</li> 29 <li>内容段落3</li> 30 </ul> 31 </div> 32 <div> 33 <h3>主题二（点击我）</h3> 34 <ul> 35 <li>内容段落1</li> 36 <li>内容段落2</li> 37 <li>内容段落3</li> 38 </ul> 39 </div> 40 <div> 41 <h3>主题三（点击我）</h3> 42 <ul> 43 <li>内容段落1</li> 44 <li>内容段落2</li> 45 <li>内容段落3</li> 46 </ul> 47 </div> 48 </body> 49 </html>
