一级二级菜单slideToggle
2017-01-30 14:49
120 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <style type="text/css"> *{margin:0;padding:0} .content{ margin:100px auto; width:800px; height:1000px; border:1px red solid; } ul{ list-style-type:none; width:300px; height:30px; border:1px red solid; margin:0 auto; } .content li{ float:left; width:40px; height:30px; background:yellow ; text-align:center; line-height:30px; padding-left:20px; } .content ul li ul{ display:none; } </style> <script type="text/javascript"> $(function(){ $('.content ul>li').hover(function(){ $(this).children().slideToggle(); }); }); </script> </head> <body> <div class="content"> <ul> <li>菜单1 <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> </li> <li>菜单2 <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> </li> <li>菜单3 <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> </li> <li>菜单4 <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> </li> <li>菜单5 <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> </li> </ul> </div> </body> </html>
相关文章推荐
- JQuery中鼠标划过一级菜单,有二级菜单的就显示的处理
- 一级横向滑动,二级竖向下拉综合菜单
- 一级横菜单二级坚菜单
- 鼠标移入侧边栏一级菜单后,二级菜单显示
- 【荐】JS一级横向滑动,二级竖向下拉的综合菜单
- html和css实现一级菜单和二级菜单学习笔记
- kendo 底部弹出选择菜单,可用作底部一级、二级导航kendoNotification
- vtiger7 自定义菜单 (一级菜单、二级菜单)
- JavaScript/jquery:利用hide和slideToggle做简单的二级菜单
- 兼容IE6的一级横二级坚菜单
- 角色权限管理系统(二级菜单的显示、一级菜单管理)
- android实现底部导航栏和顶部导航栏(相当于网页上的一级菜单和二级菜单)
- 一级菜单 二级菜单的联动
- 动态建立右键菜单(一级/二级/三级) 响应鼠标单击事件及修改项的内容
- php菜单一级,二级分类栏目的获得
- 一个不错的tab效果的导航菜单(一级和二级为横向)
- ztree二级菜单有查询条件,ztree一级菜单没有查询条件
- jQuery中,选中一级菜单,二级菜单自动出现的js代码
- 一级菜单hover进入二级菜单,二级菜单不消失
- html和css实现一级菜单和二级菜单学习笔记