基于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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 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编程函数安全篇
2013/01/08 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
深入分析php之面向对象
2013/05/15 PHP
PHP的引用详解
2015/02/22 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
JavaScript 参考教程
2006/12/29 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
jquery中动态效果小结
2010/12/16 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
JAVA和C++的区别
2013/10/06 面试题
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
Final类有什么特点
2012/04/25 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
境外导游求职信
2014/02/27 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
同学聚会通知书
2015/04/20 职场文书