编程 Javascript

基于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>

基于JQuery的简单实现折叠菜单代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 简单高效判断数据类型系列函数 By shawl.qiu

Mar 06 Javascript

js 日期转换成中文格式的函数

Jul 07 Javascript

使用js实现关闭js弹出层的窗口

Feb 10 Javascript

Jquery 实现弹出层插件

Jan 28 Javascript

jQuery对象初始化的传参方式

Feb 26 Javascript

Angularjs 实现分页功能及示例代码

Sep 14 Javascript

如何快速上手Vuex

Feb 14 Javascript

浅谈React Event实现原理

Sep 20 Javascript

mpvue 单文件页面配置详解

Dec 02 Javascript

vue项目中axios请求网络接口封装的示例代码

Dec 18 Javascript

vue3修改link标签默认icon无效问题详解

Oct 09 Javascript

JavaScript仿京东秒杀倒计时

Mar 17 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