jQuery show hide方法 二级菜单

Posted xiemin-minmin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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设置下拉菜单

用jquery制作一个二级导航下拉菜单

jquery的hide和show方法疑问

20款jquery下拉导航菜单特效代码分享

jquery hide,show方法问题

请教jquery的hide()和show()方法遇到的问题