基于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 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 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
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
简介Django中内置的一些中间件
2015/07/24 Python
Python中几种导入模块的方式总结
2017/04/27 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
物控部经理职务说明书
2014/02/25 职场文书
公司总经理岗位职责
2014/03/15 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
社团招新宣传语
2015/07/13 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏