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

所属分类：网络编程 / JavaScript 阅读数： 1903

收藏 0赞 0分享

菜单为二级，初始化时为折叠效果，单击大项标题时展开，显示二级列表。
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> 

更多精彩内容其他人还在看