1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8" /> 5 <!--viewport 视口 : width=device-width 设置视口(理想网页宽)与设备的宽一致--> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <!--ie浏览器以最新版本渲染页面--> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 9 <title>menu 菜单显示隐藏-jquery实现</title> 10 <style> 11 /*reset.css 全局样式*/ 12 /*清除块元素空隙*/ 13 *{ 14 margin:0; 15 padding:0; 16 } 17 /*去掉项目符号*/ 18 ul,ol{ 19 list-style:none; 20 } 21 /*===================================*/ 22 .menu{ 23 height:40px; 24 background: #eee; 25 } 26 .menu>li{ 27 position: relative; 28 float:left; 29 width:100px; 30 border:1px solid #ccc; 31 line-height: 40px; 32 text-align: center; 33 } 34 .menu>li ul{ 35 position: absolute; 36 left:0; 37 top:40px; 38 display: none; 39 } 40 .menu>li li{ 41 width:100px; 42 line-height: 40px; 43 text-align: center; 44 border: 1px solid #ccc; 45 } 46 </style> 47 </head> 48 <body> 49 <!--菜单显示隐藏--> 50 <ul class="menu"> 51 <li>小米 52 <ul> 53 <li>红米</li> 54 <li>小米9</li> 55 <li>小米10</li> 56 </ul> 57 </li> 58 <li>诺基亚 59 <ul> 60 <li>诺基亚0</li> 61 <li>诺基亚9</li> 62 <li>诺基亚10</li> 63 </ul> 64 </li> 65 <li>iphone</li> 66 <li>华为 67 <ul> 68 <li>华为 mate20</li> 69 <li>华为 mate9</li> 70 <li>华为 mate10</li> 71 </ul> 72 </li> 73 </ul> 74 <!--jquery 库--> 75 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> 76 <script> 77 /* 78 显示隐藏菜单描述： 79 80 （1）给每个li(有子菜单ul)添加 鼠标移入和移出 (mouseover mouseout; mouseenter,mouseleave常用) 81 (2) 让当前有 子菜单ul的内容显示和隐藏（show(),hide() fadeIn() fadeOut()） 82 */ 83 $('.menu li').has('ul').mouseenter(function(){ 84 $(this).children('ul').fadeIn(500); 85 }).mouseleave(function(){ 86 $(this).children('ul').fadeOut(300); 87 }) 88 </script> 89 </body> 90 </html>