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>