×

用JQuery简单实现折叠菜单

作者:ceshi2017.04.29来源:Web前端之家浏览:13748评论:0
关键词:JQueryJS

用JQuery简单实现折叠菜单。来看看代码:

HTML代码如下: 

<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>
其中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>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/biji85.html

网友评论文明上网理性发言 已有0人参与

发表评论: