码迷,mamicode.com
首页 > Web开发 > 详细

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 }();

点击链接之前:

技术分享

点击链接之后:

技术分享

期间遇到的问题:

一、导航栏中有三个商品链接,都在div中,怎么判断用户点击的是哪个链接,然后对其展开?

  $(this)指向当前对象,然后通过查找父子兄弟,实现相应的操作

  JQuery的父,子,兄弟节点查找方法http://www.cnblogs.com/srxhmxx/p/4541656.html

JQuery实现可折叠导航栏

标签:

原文地址:http://www.cnblogs.com/srxhmxx/p/4540690.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!