基于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 15 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
原生js实现密码强度验证功能
Mar 18 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/10/26 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
JS实现随机点名器
2020/04/12 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
深入理解python try异常处理机制
2016/06/01 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Python运行异常管理解决方案
2020/03/09 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
优秀护士获奖感言
2014/02/20 职场文书
我的求职择业计划书
2014/04/04 职场文书
公证书标准格式
2014/04/10 职场文书
宿舍标语大全
2014/06/19 职场文书
全陪导游词
2015/02/04 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
MySQL数据库查询之多表查询总结
2022/08/05 MySQL