menu 菜单显示隐藏-jquery实现 

 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>

 

posted @ 2019-06-10 17:44  WX1211  阅读(661)  评论(0)  编辑  收藏  举报