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

更新时间：2010年09月15日 01:29:21 作者：

利用JQUERY简单的实现功能菜单的折叠效果。本人初学，写后台稍多一点，很少写前台的效果。还请大虾们多多指教。

菜单为二级，初始化时为折叠效果，单击大项标题时展开，显示二级列表。
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='#'>&nbsp;&nbsp;等待提交</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;等待发布</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;正式项目</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;点此新增</a></li></ul> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">更新流程</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>&nbsp;&nbsp;后台搜索</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;更新流程</a></li> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">FAQ管理</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>&nbsp;&nbsp;等待提交</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;等待发布</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;正式项目</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;点此新增</a></li></ul> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">下载管理</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>&nbsp;&nbsp;等待提交</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;等待发布</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;正式项目</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;点此新增</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简单注册和禁用全局事件的方法
这篇文章主要介绍了jQuery简单注册和禁用全局事件的方法,结合实例形式分析了jQuery中ajaxStart与ajaxStop方法的使用技巧,需要的朋友可以参考下
2016-07-07
用jquery快速解决IE输入框不能输入的问题
下面小编就为大家带来一篇用jquery快速解决IE输入框不能输入的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
jQuery源码解读之removeAttr()方法分析
这篇文章主要介绍了jQuery源码解读之removeAttr()方法分析,较为详细的分析了removeAttr方法的实现技巧,非常具有实用价值,需要的朋友可以参考下
2015-02-02
jQuery实现验证用户登录
这篇文章主要为大家详细介绍了jQuery实现验证用户登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
关于jQuery中fade(),show()起始位置的一点小发现
下面小编就为大家带来一篇关于jQuery中fade(),show()起始位置的一点小发现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
jQuery中fadein与fadeout方法用法示例
这篇文章主要介绍了jQuery中fadein与fadeout方法用法,结合实例形式分析了jQuery使用fadein与fadeout方法实现页面元素淡入淡出效果的相关技巧,需要的朋友可以参考下
2016-09-09
jQuery简单实现MD5加密的方法
这篇文章主要介绍了jQuery简单实现MD5加密的方法,基于jquery.md5.js插件实现md5加密功能,非常简单实用,需要的朋友可以参考下
2017-03-03
jquery插件validate验证的小例子
2013-05-05
一个超简单的jQuery回调函数例子(分享)
下面小编就为大家带来一篇一个超简单的jQuery回调函数例子(分享) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
jQuery的animate函数学习记录
jQuery.animate的每种动画过渡效果都是通过easing函数实现的，下面是自己研究之后对其的基本认识
2014-08-08