实现一个导航栏，单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品
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
时间： 2024-10-06 10:35:03