jquery制作折叠式菜单（Accordion）

来源：互联网发布：淘宝怎么宝贝发布不了编辑：程序博客网时间：2024/04/30 15:13

1. 制作折叠式菜单（Accordion）

折叠式菜单是和Tab面板一样流行的高级网页元素，它是一种二级菜单，当点击某个主菜单项时，就会以滑动的方式展开它下面的二级菜单，同时自动收缩隐藏其他主菜单项的二级菜单，如图所示。因此折叠式菜单有一个很好听的英文名叫“Accordion”（手风琴），它的折叠方式是不是有点像在拉手风琴呢？

<scripttype="text/javascript" src="js/jquery-1.9.0.js"></script><scriptlanguage="javascript" type="text/javascript">$(document).ready(function(){//将二级菜单设置为不可见$(".FAQlist").css("display","none");$(".admintext11").css("color","red");$(".closelist").css("color","green");$(".FAQlist").css("cursor","pointer");$(".admintext11").css("cursor","pointer");$(".closelist").css("cursor","pointer");//将二级菜单设置为不可见$(".closelist").click(function(){$(".FAQlist").css("display","none");//将二级菜单全部设置为不可见});//单击一级菜单触发的事件$(".bartitleFAQ").click(function(){if ($(this).next(".FAQlist").css("display")== "none") {$(this).next(".FAQlist").css("display","block");//当前一级菜单的二级菜单设置为可见} else{$(this).next(".FAQlist").css("display","none");//当前一级菜单的二级菜单设置为不可见}});});</script><body><divclass="mainleftFAQ"><divclass="category">=============层叠菜单演示==============</div><divclass="bartitleFAQ"><imgsrc="images/yuan.png" /> <span class="closelist"title="点击">关闭所有下拉菜单</span></div><divid="disp"></div><divclass="bartitleFAQ"><imgsrc="images/yuan.png" /> <span class="admintext11"title="点击">服务管理</span></div><divclass="FAQlist"><ul><li><ahref='#'> 等待提交</a></li><li><ahref='#' title=''> 等待发布</a></li><li><ahref='#' title=''> 正式项目</a></li><li><ahref='#' title=''> 点此新增</a></li></ul></div><divclass="bartitleFAQ"><imgsrc="images/yuan.png" /> <span class="admintext11"title="点击">更新流程</span></div><divclass="FAQlist"><ul><li><ahref='#'> 后台搜索</a></li><li><ahref='#' title=''> 更新流程</a></li></ul></div><divclass="bartitleFAQ"><imgsrc="images/yuan.png" /> <span class="admintext11"title="点击">FAQ管理</span></div><divclass="FAQlist"><ul><li><ahref='#'> 等待提交</a></li><li><ahref='#' title=''> 等待发布</a></li><li><ahref='#' title=''> 正式项目</a></li><li><ahref='#' title=''> 点此新增</a></li></ul></div><divclass="bartitleFAQ"><imgsrc="images/yuan.png" /> <span class="admintext11"title="点击">下载管理</span></div><divclass="FAQlist"><ul><li><ahref='#'> 等待提交</a></li><li><ahref='#' title=''> 等待发布</a></li><li><ahref='#' title=''> 正式项目</a></li><li><ahref='#' title=''> 点此新增</a></li></ul></div></div></body>

0 0