利用JQUERY简单的实现功能菜单的折叠效果。本人初学，写后台稍多一点，很少写前台的效果。还请大虾们多多指教。
菜单为二级，初始化时为折叠效果，单击大项标题时展开，显示二级列表。
HTML代码如下：
复制代码 代码如下:
<body>
<div>
<div>
<img src="https://www.jb51.net/images/admin.gif" />
</div>
<div>
</div>
<div>
<img src="https://www.jb51.net/images/yuan.gif" /><span>服务管理</span></div>
<div>
<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>
<img src="https://www.jb51.net/images/yuan.gif" /><span>更新流程</span></div>
<div>
<ul>
<li><a href='#'> 后台搜索</a></li>
<li><a href='#' title=''> 更新流程</a></li>
</div>
<div>
<img src="https://www.jb51.net/images/yuan.gif" /><span>FAQ管理</span></div>
<div>
<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>
<img src="https://www.jb51.net/images/yuan.gif" /><span>下载管理</span></div>
<div>
<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>
<img src="https://www.jb51.net/images/yuan.gif" /><span>返回首页</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>
您可能感兴趣的文章: