CSS+jQuery实现简单的折叠菜单

2019-11-19 18:22:57

字体：大中小

来源：转载

供稿：网友

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!DOCTYPE html> <html>   <head>     <title>折叠菜单</title>     <style>       body{         background:grey;         font-family:Microsoft Yahei;         color:white;       }       .types a{         text-decoration:none;         color:white;       }       .types ul{         display:none;       }       .files ul{         display:none;       }     </style>     <script src="js/jquery-1.8.2.min.js"></script>     <script>       $(document).ready(function(){         var span=$(".files").find("span");         var ul=$(".files").find("ul");         span.bind("click",function(){           ul.each(function(){             $(this).css("display","none");           });           $(this).next().css("display","block");         });       });     </script>   </head>   <body>     <ul class="files">       <li class="file">         <span>文件2-1</span>         <ul>           <li class="document"><a href="#">文档2-1-1</a></li>           <li class="document"><a href="#">文档2-1-2</a></li>         </ul>       </li>       <li class="file">         <span>文件2-2</span>         <ul>           <li class="document"><a href="#">菜单2-2-1</a></li>           <li class="document"><a href="#">菜单2-2-2</a></li>         </ul>       </li>       <li class="file">         <span>文件2-3</span>         <ul>           <li class="document"><a href="#">菜单2-3-1</a></li>           <li class="document"><a href="#">菜单2-3-2</a></li>         </ul>       </li>     </ul>   </body> </html>

以上所述是小编给大家介绍的CSS+jQuery实现简单的折叠菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：JS高级运动实例分析

下一篇：jQuery常见的选择器及用法介绍