基于JQuery的简单实现折叠菜单代码


Posted in Javascript onSeptember 15, 2010

菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表。
HTML代码如下:

<body> 
<div class="mainleftFAQ"> 
<div class="category"> 
<img src="images/admin.gif" width="215" height="66" /> 
</div> 
<div id="disp"> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">服务管理</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>  等待提交</a></li> 
<li><a href='#' title=''>  等待发布</a></li> 
<li><a href='#' title=''>  正式项目</a></li> 
<li><a href='#' title=''>  点此新增</a></li></ul> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">更新流程</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>  后台搜索</a></li> 
<li><a href='#' title=''>  更新流程</a></li> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">FAQ管理</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>  等待提交</a></li> 
<li><a href='#' title=''>  等待发布</a></li> 
<li><a href='#' title=''>  正式项目</a></li> 
<li><a href='#' title=''>  点此新增</a></li></ul> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">下载管理</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>  等待提交</a></li> 
<li><a href='#' title=''>  等待发布</a></li> 
<li><a href='#' title=''>  正式项目</a></li> 
<li><a href='#' title=''>  点此新增</a></li></ul> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">返回首页</span></div> 
</div> 
</body>

其中JQUERY脚本,只需简单的几行便可以实现想要的效果。具体代码如下所示:
<script language="javascript" type="text/javascript"> 
$(document).ready(function () { 
//将二级菜单设置为不可见 
$(".FAQlist").css("display", "none"); 
//单击一级菜单触发的事件 
$(".bartitleFAQ").click(function () { 
$(".FAQlist").css("display", "none");//将二级菜单全部设置为不可见 
$(this).next(".FAQlist").css("display", "block");//当前一级菜单的二级菜单设置为可见 
}) 
}) 
</script>
Javascript 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 #Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 #Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 #Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 #Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 #Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 #Javascript
基于jquery的页面划词搜索JS
Sep 14 #Javascript
You might like
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
PHP多文件上传类实例
2015/03/07 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
JS实现图片切换效果
2018/11/17 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
举例讲解Python装饰器
2020/12/24 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
锐步英国官网:Reebok英国
2019/11/29 全球购物
教师申诉制度
2014/01/29 职场文书
安全责任书范文
2014/08/25 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
Python中request的基本使用解决乱码问题
2022/04/12 Python
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL