jQuery实现折叠菜单
效果图
代码如下
<html> <head> <title></title> </head> <style> *{ margin:0; padding:0; } .nav{ margin:100px 500px; } .nav>li{ list-style:none; //height:50px; border:1px solid #000; border-bottom:none; line-height:35px; } .nav>li:last-child{ border-bottom:1px solid #000; border-bottom-right-radius:10px; border-bottom-left-radius:10px; } .nav>li:first-child{ border-top-right-radius:10px; border-top-left-radius:10px; } .sub{ display:none; background:purple; } .sub>li{ list-style:none; border-top:1px solid #000; } .sub>li:hover{ background:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('.nav>li').click(function(){ //获取到所有的li的点击事件 $(this).children('.sub').slideDown(1000); //$(this)获取到所点击的li,$(this).children('.sub')获取到点击的li类叫sub的孩子,让它下滑出来 $(this).siblings().children('.sub').slideUp(); //$(this)获取到所点击的li,$(this).siblings(),指获取到除了所点击的li所有的li,然后让.sub上滑隐藏起来 }) }) </script> <body> <ul class="nav"> <li> 一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li> 一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li> 一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li> 一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li> 一级菜单 <ul class="sub"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> </body> </html>