基于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中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
OpenLayers3实现地图显示功能
Sep 25 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的call_user_func传reference引发的思考
2010/07/23 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python模拟实现斗地主发牌
2020/01/07 Python
贝佳斯官方网站:Borghese
2020/05/08 全球购物
会计专业大学生职业生涯规划书
2014/02/11 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
被告答辩状范文
2015/05/22 职场文书
培训计划通知
2015/07/15 职场文书
开网店计划分析
2019/07/30 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL