14JQuery笔记-----------------------同学通讯录 

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 3     <title></title>
 4     <script src="jquery-1.8.3.min.js"></script>
 5     <style type="text/css">
 6         #u1>li{
 7            border:1px solid blue;
 8            cursor:pointer;
 9           margin-bottom:5px;
10           background-color:orange;
11         }
12         #u1 li ul{
13             margin:0px;
14             padding:0px;
15         }
16         #u1 li ul li{
17             list-style-type:none;    
18             /*border:1px solid yellow;*/          
19             text-align:center;
20             font-size:25px;
21             font-family:'Kozuka Gothic Pr6N';
22             margin-bottom:10px; 
23             background-color:pink;
24         }
25 
26 
27     </style>
28 
29     <script type="text/javascript">
30         $(function () {
31             $('#u1 li ul li').hide();
32             $('#u1 li').click(function () {
33                 $('ul li', $(this)).show(500);
34                 $('ul li', $(this).siblings()).hide(500);
35             });
36             
37         });
38 
39 
40     </script>
41 </head>
42 <body>
43     <div style="width:300px;border:1px solid red">
44         <ul id="u1" style="list-style-type:none;margin:0;padding:0;text-align:center;font-size:30px;">
45             <li>
46                 幼儿园同学
47 
48                 <ul>
49                     <li>小狗</li>
50                     <li>小毛</li>
51                     <li>小蛋</li>
52                     <li>小鼻涕</li>
53                 </ul>
54             </li>
55             <li>
56                 小学同学
57 
58                 <ul>
59                     <li>二狗</li>
60                     <li>二毛</li>
61                     <li>二蛋</li>
62                     <li>二鼻涕</li>
63                 </ul>
64             </li>
65             <li>
66                 中学同学
67 
68                 <ul>
69                     <li>三狗</li>
70                     <li>三毛</li>
71                     <li>三蛋</li>
72                     <li>三鼻涕</li>
73                 </ul>
74             </li>
75             
76         </ul>
77     </div>
78 </body>
79 </html>

 

posted on 2016-01-13 17:42  努力的活着_在人间  阅读(184)  评论(0)    收藏  举报

导航