jquery之商城菜单

实现效果:悬浮总菜单,显示分类菜单,移走隐藏总菜单,悬浮分类菜单,显示商品种类,移走隐藏商品种类和分类菜单,悬浮商品种类,显示商品种类和分类菜单,移走隐藏商品菜单和分类菜单。

代码如下:

 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>
View Code

 

posted @ 2019-02-07 22:02 飞鸟_山东 阅读(...) 评论(...) 编辑 收藏