当前位置:编程学习 > JS >>

jquery 折叠菜单效果代码

jjquery 折叠菜单效果代码来介绍一下关于如何利用jquery来实例菜单效果代码哦,下面来看看这款利用jquery插件实现的方法吧。

query 代码
html代码

<script language="网页特效" type="text/javascript">
$(document).ready(function () {
//将二级菜单设置为不可见
$(".faqlist").css教程("display", "none");
//单击一级菜单触发的事件
$(".bartitlefaq").click(function () {
$(".faqlist").css("display", "none");//将二级菜单全部设置为不可见
$(this).next(".faqlist").css("display", "block");//当前一级菜单的二级菜单设置为可见
})
})
</script>

 

<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 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,