编程 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知识点之"字面量和对应类型"说明介绍

Apr 23 Javascript

二叉树先序遍历的非递归算法具体实现

Jan 09 Javascript

jQuery实现转动随机数抽奖效果的方法

May 21 Javascript

jQuery+PHP实现可编辑表格字段内容并实时保存

Oct 09 Javascript

jQuery实现图片走马灯效果的原理分析

Jan 16 Javascript

AngularJS 自定义指令详解及示例代码

Aug 17 Javascript

Bootstrap简单表单显示学习笔记

Nov 15 Javascript

通过学习bootstrop导航条学会修改bootstrop颜色基调

Jun 11 Javascript

vue-quill-editor实现图片上传功能

Aug 08 Javascript

jquery实现左右轮播图效果

Sep 28 jQuery

如何利用@angular/cli V6.0直接开发PWA应用详解

May 06 Javascript

微信小程序Getuserinfo解决方案图解

Aug 24 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