JQuery简单实现菜单的点击效果
2016-09-27 15:46
429 查看
利用JQuery简单实现菜单的点击打开和关闭
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/demo.js"></script> </head> <body> <ul id="umenu"> <!--第一个--> <li class="litem"><a href="javascript:;">四大组件</a> <ul class="uitem" style="display: none"> <li><a href="javascript:;">Activity</a></li> <li><a href="javascript:;">Service</a></li> <li><a href="javascript:;">ContentProvider</a></li> <li><a href="javascript:;">BroadcastReceiver</a></li> </ul> </li> <!--第二个--> <li class="litem"><a href="javascript:;">常用控件</a> <ul class="uitem" style="display: none"> <li><a href="javascript:;">基本UI组件</a></li> <li><a href="javascript:;">ListView</a></li> <li><a href="javascript:;">GirdView</a></li> <li><a href="javascript:;">ViewPager</a></li> <li><a href="javascript:;">Fragment</a></li> </ul> </li> <!--第三个--> <li class="litem"><a href="javascript:;">网络访问</a> <ul class="uitem" style="display: none"> <li><a href="javascript:;">基础知识</a></li> <li><a href="javascript:;">Volley</a></li> <li><a href="javascript:;">OKHttp</a></li> <li><a href="javascript:;">Retrofit</a></li> <li><a href="javascript:;">数据解析</a></li> </ul> </li> <!--第四个--> <li class="litem"><a href="javascript:;">数据存储</a> <ul class="uitem" style="display: none"> <li><a href="javascript:;">缓存相关</a></li> <li><a href="javascript:;">数据库</a></li> </ul> </li> <!--第五个--> <li class="litem"><a href="javascript:;">动画效果</a> <ul class="uitem" style="display: none"> <li><a href="javascript:;">属性动画</a></li> <li><a href="javascript:;">补间动画</a></li> </ul> </li> <!--第六个--> <li class="litem"><a href="javascript:;">自定义控件</a> <ul class="uitem" style="display: none"> <li><a href="javascript:;">基础知识</a></li> <li><a href="javascript:;">事件分发</a></li> <li><a href="javascript:;">具体案例</a></li> <li><a href="javascript:;">绘图相关</a></li> </ul> </li> </ul> </body> </html>
@charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; font-family:"微软雅黑"; font-size:18px; } body{ background:#fff; } ul{ list-style:none; } a{ color:#1F1F1F; text-decoration:none; } .litem{ width:227px; } .litem > a{ height:41px; padding-left:5px; background:#B5CC89; display:block; margin-top:2px; border-left:solid 12px #3E7421; line-height:41px; } .uitem li{ border-bottom:solid 1px #999999; <!--display:none;--> } .uitem a{ height:41px; padding-left:5px; background:#DFEBBC; display:block; line-height:41px; border:solid 1px #fff; padding-left:20px; }
// JavaScript Document $(function(){ /*$(".uitem").show();*/ $(".litem > a").click(function(){ $(this).next(".uitem").slideToggle() }) });
相关文章推荐
- jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
- jquery简单实现带渐显效果的选项卡菜单代码
- jQuery实现的简单折叠菜单(折叠面板)效果代码
- jQuery 简单实现菜单折叠效果!
- jquery实现可点击伸缩与展开的菜单效果代码
- jquery实现最简单的滑动菜单效果代码
- 用Jquery方法实现的简单下滑菜单效果
- jquery实现简单Tab切换菜单效果
- jquery简单实现点击弹出层效果实例
- jquery简单实现点击弹出层效果实例
- jQuery简单实现仿京东商城的左侧菜单效果代码
- jquery实现点击弹出层效果的简单实例
- jquery实现简单手风琴菜单效果实例
- jquery实现可点击伸缩与展开的菜单效果代码
- jQuery简单实现仿京东商城的左侧菜单效果代码
- jQuery实现简单的列表式导航菜单效果代码
- 基于jQuery实现简单的折叠菜单效果
- 基于jQuery实现简单的折叠菜单效果
- 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载