JQuery实现可折叠导航栏

时间：2015-05-31 12:18:21 阅读：166 评论：0 收藏：0 [点我收藏+]

标签：

实现一个导航栏，单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>JQuery实现导航栏</title>
 6 
 7 <style type="text/css">
 8     a{
 9         text-decoration:none;
10         display:block;
11     }
12     .link{
13         background-color:#C2C2BC;
14     }
15     .level1{
16         border:1px solid #eee;
17     }
18     .level2{
19         display:none;
20     }
21     div{
22         width:150px;
23         text-align:center;
24     }
25     </style>
26 </head>
27 
28 <body>
29 <div class="box">
30     <div class="menu">
31         <div class="level1">
32             <a href="javascript:;" data="衬衫">衬衫</a>
33             <div class="level2">
34                 <div><a href="javascript:;">短袖衬衫</a></div>
35                 <div><a href="javascript:;">长袖衬衫</a></div>
36                 <div><a href="javascript:;">短袖T恤</a></div>
37                 <div><a href="javascript:;">长袖T恤</a></div>
38             </div>
39         </div>
40         <div class="level1">
41             <a href="javascript:;" data="卫衣">卫衣</a>
42             <div class="level2">
43                 <div><a href="javascript:;">开襟卫衣</a></div>
44                 <div><a href="javascript:;">套头卫衣</a></div>
45                 <div><a href="javascript:;">运动卫衣</a></div>
46                 <div><a href="javascript:;">童装卫衣</a></div>
47             </div>
48         </div>
49         <div class="level1">
50             <a href="javascript:;" data="裤子">裤子</a>
51             <div class="level2">
52                 <div><a href="javascript:;">短裤</a></div>
53                 <div><a href="javascript:;">休闲裤</a></div>
54                 <div><a href="javascript:;">牛仔裤</a></div>
55                 <div><a href="javascript:;">免烫卡其裤</a></div>
56             </div>
57         </div>
58     </div>
59 </div>
60 
61 
62 <script src="../Public/assets/plugins/jquery/jquery-1.11.2.js" type="text/javascript"></script>
63 <script src="../Public/assets/plugins/jquery/jquery-1.11.2.min.js"></script>
64 
65 <script src="../public/assets/global/js/mxx.js"></script>
66 <script type="text/javascript">
67 $(document).ready(function(){
68     Mxx.init();
69 });
70 </script>
71 
72 </body>
73 </html>

 1 var Mxx = function(){
 2     var initData = function(){
 3         $(".level1>a").bind(‘click‘,function(){
 4             $(this).toggleClass("link");
 5             $(this).next().slideToggle();
 6         });
 7         
 8     };
 9     return{
10         init:function(){
11             initData();
12         }
13     };
14 }();