實現效果：懸浮總菜單，顯示分類菜單，移走隱藏總菜單，懸浮分類菜單，顯示商品種類，移走隱藏商品種類和分類菜單，懸浮商品種類，顯示商品種類和分類菜單，移走隱藏商品菜單和分類菜單。 代碼如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta ch ...
實現效果：懸浮總菜單，顯示分類菜單，移走隱藏總菜單，懸浮分類菜單，顯示商品種類，移走隱藏商品種類和分類菜單，懸浮商品種類，顯示商品種類和分類菜單，移走隱藏商品菜單和分類菜單。
代碼如下：
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
