jQuery树形下拉菜单特效代码分享
2015-08-15 00:00
796 查看
本文实例讲述了jQuery实现幻树形下拉菜单特效,实现自动伸缩,分享给大家供大家参考。
运行jQuery树形下拉菜单特效效果图:
为大家分享的jQuery树形下拉菜单代码如下
<head> <title>常用的jquery下拉菜单</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready( function() { $(".menuTitle").click(function(){ $(this).next("div").slideToggle("slow") .siblings(".menuContent:visible").slideUp("slow"); $(this).toggleClass("activeTitle"); $(this).siblings(".activeTitle").removeClass("activeTitle"); }); }); </script> <style type="text/css"> body { margin:0;background-color:#9ad075; } .container { width:100%; text-align:center; } .menuTitle { width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px; } .activeTitle { width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px; } .menuContent { background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none; } li { background:url(images/arr.gif) no-repeat 20px 6px ; list-style-type:none;padding:0px 0px 0px 38px; font-size:12.7px; height:20px; line-height:20px; } ul { margin:0;padding:0; } </style> </head> <body> <div class="container"> <div class="menuTitle"> 资源库 </div> <div class="menuContent"> <ul> <li> <a href="#">欢迎访问</a></li> <li><a href="http://www.jb51.net/"> 脚本之家 </a></li> <li><a href="http://www.jb51.net/list/index_1.htm"> 网络编程</a></li> </ul> </div> <div class="menuTitle"> 文章模块 </div> <div class="menuContent"> <ul> <li> <a href="#">前端技术</a></li> <li> <a href="http://www.jb51.net/list/list_21_1.htm">ASP.NET</a></li> <li> <a href="http://www.jb51.net/list/index_104.htm">数据库</a></li> </ul> </div> <div class="menuTitle"> 下载模块 </div> <div class="menuContent"> <ul> <li> <a href="http://www.jb51.net/">脚本之家 </a></li> <li> <a href="http://www.jb51.net/codes/">源码下载</a></li> <li> <a href="http://www.jb51.net/books/">电子书籍</a></li> </ul> </div> </div> </body> </html>
以上就是为大家分享的jQuery树形下拉菜单代码,希望大家可以喜欢。
相关文章推荐
- jquery 全屏幻灯片 fullsizable GTX加强版 不拉伸图片
- jQuery的如何捕捉回车键,改变事件标签
- 分享在MVC3.0中使用jQuery DataTable 插件
- jQuery DataTables and ASP.NET MVC Integration
- 点滴积累【JS】---JQuery实现条形统计图,适用于选择题等统计
- 以“图片渐入渐出”为例讲述jQuery插件的具体实现
- SpringMVC+Jquery -页面异步加载数据
- Jquery-截取过长字符串
- JQuery找页面中的关键字
- JQuery 如何选择带有多个class的元素
- 用jQuery实例来详细说明JSON和JSONP
- 很容易学习的JQuery库 : (二) 选择器
- 【Jquery】prop与attr的区别
- SSH中的ajax jquery配置(注册验证用户名是否存在)
- jQuery--员工管理
- 写出高性能的JQuery
- 解决jquery.validate.js的验证bug
- jquery操作radio和checkbox
- jquery -- body div 和 body>div 的区别
- JQuery easyui Datagrid 分页事件