jquery之商城菜单
Posted wenxianfeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于jquery之商城菜单的主要内容，如果未能解决你的问题，请参考以下文章