JQuery之左侧菜单 

 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>

 

posted @ 2017-12-27 22:45  zhang.ning  阅读(188)  评论(0)    收藏  举报