1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .menu{
8 float: left;width: 30%;height: 500px;background-color: antiquewhite;
9 }
10 .content{
11 float: left;width: 70%;height: 500px;background-color: blue;
12 }
13 .title{
14 background-color: black;
15 color: white;
16 height: 50px;
17 line-height: 50px;
18 }
19 .hide{
20 display: none;
21 }
22
23 </style>
24 </head>
25 <body>
26 <div>
27 <div class="menu">
28 <div class="item">
29 <div class="title" onclick="Func(this);">菜单一</div>
30 <div class="body ">
31 <div>1.1</div>
32 <div>1.2</div>
33 <div>1.3</div>
34 </div>
35 </div>
36 <div class="item">
37 <div class="title"onclick="Func(this);">菜单二</div>
38 <div class="body hide">
39 <div>2.1</div>
40 <div>2.2</div>
41 <div>2.3</div>
42 </div>
43 </div>
44 <div class="item">
45 <div class="title"onclick="Func(this);">菜单三</div>
46 <div class="body hide">
47 <div>3.1</div>
48 <div>3.2</div>
49 <div>3.3</div>
50 </div>
51 </div>
52
53 </div>
54 <div class="content"></div>
55 </div>
56 <script src="jquery-3.2.1.js"></script>
57 <script>
58 function Func(ths) {
59 console.log($(ths).text());
60 $(ths).next().removeClass('hide');
61 $(ths).parent().siblings().find('.body').addClass('hide');
62
63 }
64 </script>
65 </body>
66 </html>
