【代码片段】jQuery测试.children() .siblings() .siblings().children()

 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</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; color:white; background:green; }
 9     h3 { cursor:pointer; margin:0; }
10     ul { list-style:none; margin:0; padding:5px 0; border:3px solid black; 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         $("div").click(function(){
17             $(this).addClass("highlight")
18                    .children("ul").show().end()
19             .siblings().removeClass("highlight")
20                    .children("ul").hide();
21         });
22     });
23 </script>
24 </head>
25 <body>
26     <div>
27         <h3>主题一（点击我）</h3>
28         <ul>
29             <li>内容段落1</li>
30             <li>内容段落2</li>
31             <li>内容段落3</li>
32         </ul>
33     </div>
34     <div>
35         <h3>主题二（点击我）</h3>
36         <ul>
37             <li>内容段落1</li>
38             <li>内容段落2</li>
39             <li>内容段落3</li>
40         </ul>
41     </div>
42     <div>
43         <h3>主题三（点击我）</h3>
44         <ul>
45             <li>内容段落1</li>
46             <li>内容段落2</li>
47             <li>内容段落3</li>
48         </ul>
49     </div>
50 </body>
51 </html>