jQuery show hide方法二级菜单

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>submenu</title>
  9     <style>
 10         * {
 11             margin: 0;
 12             padding: 0;
 13         }
 14         
 15         ul {
 16             list-style: none;
 17         }
 18         
 19         li ul {
 20             display: none;
 21         }
 22         
 23         a {
 24             display: block;
 25             width: 120px;
 26             height: 30px;
 27             line-height: 30px;
 28             text-align: center;
 29             text-decoration: none;
 30             color: black;
 31             background-color: orange;
 32             overflow: hidden;
 33         }
 34         
 35         a:hover {
 36             background-color: aliceblue;
 37         }
 38     </style>
 39     <script src="js/jquery-1.11.3.min.js"></script>
 40     <script>
 41         $(function() {
 42             $("ul>li").hover(function() {
 43                 // over
 44                 $(this).children("ul").show();
 45 
 46             }, function() {
 47                 // out
 48                 $(this).children("ul").hide();
 49             });
 50         })
 51     </script>
 52 </head>
 53 
 54 <body>
 55     <ul>
 56         <li>
 57             <a href="javascript:void(0);">一级菜单1</a>
 58             <ul>
 59                 <li>
 60                     <a href="javascript:void(0);">二级菜单1</a>
 61                 </li>
 62                 <li>
 63                     <a href="javascript:void(0);">二级菜单1</a>
 64                 </li>
 65                 <li>
 66                     <a href="javascript:void(0);">二级菜单1</a>
 67                 </li>
 68             </ul>
 69         </li>
 70         <li>
 71             <a href="javascript:void(0);">一级菜单2</a>
 72             <ul>
 73                 <li>
 74                     <a href="javascript:void(0);">二级菜单2</a>
 75                 </li>
 76                 <li>
 77                     <a href="javascript:void(0);">二级菜单2</a>
 78                 </li>
 79                 <li>
 80                     <a href="javascript:void(0);">二级菜单2</a>
 81                 </li>
 82             </ul>
 83         </li>
 84         <li>
 85             <a href="javascript:void(0);">一级菜单3</a>
 86             <ul>
 87                 <li>
 88                     <a href="javascript:void(0);">二级菜单3</a>
 89                 </li>
 90                 <li>
 91                     <a href="javascript:void(0);">二级菜单3</a>
 92                 </li>
 93                 <li>
 94                     <a href="javascript:void(0);">二级菜单3</a>
 95                 </li>
 96             </ul>
 97         </li>
 98     </ul>
 99 </body>
100 
101 </html>
jQuery show hide方法 二级菜单

猜你喜欢

jQuery show hide方法二级菜单
