【代码片段】toggleClass试玩

 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>