基于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='#'> 等待提交</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>



相关阅读:
MySQL的Data_ADD函数与日期格式化函数说明
如何删除数据库中的冗余数据(2)
虚拟化应用不断演进
css教程:DIV垂直居中的办法
浅析JavaScript中的静态类及JSON
搭建企业分支机构虚拟网络之Windows Server 2003
巧用UCenter Home管理相册 还原纯净绿色SNS
10个实用的PHP代码片段
使网页成黑白色调的滤镜
随机显示个性签名的js代码(兼容ie,firefox)
XHTML1.0与HTML兼容指引16条 小结
mysql中的“money”类型说明
流畅的运行Windows7减少不必要的程序和启动项
Windows7系统过期该怎么升级
快速导航

Copyright © 2016 phpStudy |