基于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>

　　推荐阅读

　　链接图片无缝(无间断)向左平滑滚动Js版代码

向左无缝滚动 body,html,div,a{ margin:0; padding:0} #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } >>>详细阅读

本文标题：基于JQuery的简单实现折叠菜单代码

地址：http://www.17bianji.com/kaifa2/JS/25704.html

1/2 1