JQuery实现可折叠导航栏

最新推荐文章于 2021-04-28 20:37:55 发布

weixin_30606461

最新推荐文章于 2021-04-28 20:37:55 发布

阅读量220

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/srxhmxx/p/4540690.html

版权

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

 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

转载于:https://www.cnblogs.com/srxhmxx/p/4540690.html

weixin_30606461

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现可折叠导航栏

实现一个导航栏，单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQuery实现导航栏</title> 6 7 <style t...
复制链接

扫一扫