jquery之商城菜单
程序员文章站
2022-05-26 21:49:51
实现效果：悬浮总菜单，显示分类菜单，移走隐藏总菜单，悬浮分类菜单，显示商品种类，移走隐藏商品种类和分类菜单，悬浮商品种类，显示商品种类和分类菜单，移走隐藏商品菜单和分类菜单。 代码如下： 1 2 3 4
view code
实现效果：悬浮总菜单，显示分类菜单，移走隐藏总菜单，悬浮分类菜单，显示商品种类，移走隐藏商品种类和分类菜单，悬浮商品种类，显示商品种类和分类菜单，移走隐藏商品菜单和分类菜单。
代码如下：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>商城菜单</title>
6 <style>
7 .second{
8 float: left;
9 }
10 .three{
11 float: left;
12 }
13 .hide{
14 display: none;
15 }
16 </style>
17 </head>
18 <body>
19 <div class="first">
20 <strong>全部商品</strong>
21 </div>
22
23 <div class="outer hide">
24
25 <div class="second">
26 <div menu-one="one">家电</div>
27 <div menu-one="two">生鲜</div>
28 </div>
29 <div class="three">
30 <div class="item hide" menu-one-content="one">
31 <div>手机</div>
32 <div>电视</div>
33 </div>
34 <div class="item hide" menu-one-content="two">
35 <div>带鱼</div>
36 <div>螃蟹</div>
37 </div>
38 </div>
39
40 </div>
41 <script src="jquery-1.8.2.js"></script>
42 <script>
43 $(function () {
44 $('.first').bind('mouseover',function () {
45 $('.second').parent().removeclass('hide')
46 });
47 $('.first').bind('mouseout',function () {
48 $('.second').parent().addclass('hide')
49 });
50
51 $('.second').children().bind('mouseover',function () {
52 $('.second').parent().removeclass('hide');
53 var num = $(this).attr('menu-one');
54 $('.three').find('[menu-one-content="'+num+'"]').removeclass('hide')
55 });
56 $('.second').children().bind('mouseout',function () {
57 $('.second').parent().addclass('hide');
58 // var num = $(this).attr('menu-one');
59 // $('.three').find('[menu-one-content="'+num+'"]').addclass('hide')
60 $('.three').children().addclass('hide')
61 });
62
63 $('.three').children().bind('mouseover',function () {
64 $('.second').parent().removeclass('hide');
65 $(this).removeclass('hide');
66 });
67 $('.three').children().bind('mouseout',function () {
68 $('.second').parent().addclass('hide');
69 $(this).addclass('hide');
70 });
71 })
72 </script>
73 </body>
74 </html>