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>
来源：https://www.cnblogs.com/programfield/p/11076505.html