jquery实现菜单栏手风琴效果 


 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>accordion</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         ul{
13             list-style:none;
14         }
15 
16 
17         .wrap{
18             width: 200px;
19             background-color: #cccccc;
20         }
21         span{
22             line-height: 30px;
23             text-align: center;
24             height: 30px;
25             display: block;
26             cursor: pointer;
27         }
28         div{
29             background-color: #ff8;
30             height: 100px;
31             display: none;
32 
33         }
34     </style>
35 </head>
36 <body>
37 
38 <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
39 <script>
40     $(function () {
41         $(".wrap>li>span").click(function () {
42             $(this).next().slideDown().parent().siblings().find("div").slideUp();
43         });
44     });
45 </script>
46 
47 
48 <ul class="wrap">
49 
50     <li><span>Title1</span>
51         <div></div>
52     </li>
53 
54     <li><span>Title2</span>
55         <div></div>
56     </li>
57 
58     <li><span>Title3</span>
59         <div></div>
60     </li>
61 
62     <li><span>Title4</span>
63         <div></div>
64     </li>
65 
66     <li><span>Title5</span>
67         <div></div>
68     </li>
69 
70     <li><span>Title6</span>
71         <div></div>
72     </li>
73 
74 </ul>
75 </body>
76 </html>

posted @ 2019-06-24 13:17  programerfield  阅读(693)  评论(0)    收藏  举报