基于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 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
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
第五节--克隆
2006/11/16 PHP
一段防盗连的PHP代码
2006/12/06 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
python实现简单ftp客户端的方法
2015/06/28 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python判断数字是否是超级素数幂
2018/09/27 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
String这个类型的class为何定义成final?
2012/11/13 面试题
禁止酒驾标语
2014/06/25 职场文书
学生吸烟检讨书
2014/09/14 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL