前几天因为公司的菜单要调整，公司的UI框架是不支持的，所以就自己在网上找了一个下拉菜单，可以支持多级菜单数据的，菜单数据是从xml文件中配置后读取的，网上有许多这方面的例子感觉不是很好用，就打了个包贴在园子里了。效果图片如下：
上图片展示的是三级，应该还可以根据自己的需要扩展多级的。
不想下载的朋友可以直接复制源码内容，总共三个文件，一个html文件，另外一个是js扩展库，还有一个是jquery库在这里使用的是gg的一个包：
index.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery实现多级手风琴菜单</title> <meta name="keywords" content="多级下拉菜单, jquery插件" /> <meta name="description" content="XHTML、CSS、jquery、PHP案例和示例" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="accordion.js"></script> <script type="text/javascript"> $(function(){ $(".nav").accordion({ //accordion: true, speed: 500, closedSign: '[+]', openedSign: '[-]' }); }); </script> <style> ul{list-style:none} .demo{300px; margin:40px auto; padding:10px; background:#f7f7f7} .nav { 213px; padding: 40px 28px 25px 0; font-family: "Microsoft yahei", Arial, Helvetica, sans-serif;} ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;} ul.nav li {} ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; text-decoration: none; font-weight: bolder;} ul.nav li a:hover {background-color:#675C7C; color:white;} ul.nav ul { margin: 0; padding: 0;display: none;} ul.nav ul li { margin: 0; padding: 0; clear: both;} ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;} ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;} ul.nav ul ul li a {color:silver; padding-left: 40px;} ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;} ul.nav span{float:right;} </style> </head> <body> <div id="main"> <div class="demo"> <ul class="nav"> <li><a href="http://renzaijianghu.cnblogs.com" target="_blank">首页</a></li> <li><a href="#">服务</a> <ul> <li><a href="#">JAVASCRIPT</a></li> <li><a href="#">PHP</a></li> <li><a href="#">MYSQL</a></li> <li><a href="#">LINUX</a></li> </ul> </li> <li><a href="#">案例</a></li> <li><a href="#">文章</a></a> <ul> <li class="active"><a href="http://renzaijianghu.cnblogs.com" target="_blank">XHTML/CSS</a></li> <li><a href="#">Javascript/Ajax/jQuery</a> <ul> <li><a href="#">Cookies</a></li> <li><a href="#">Event</a></li> <li><a href="#">Games</a></li> <li><a href="#">Images</a></li> </ul> </li> <li><a href="http://renzaijianghu.cnblogs.com" target="_blank">PHP/MYSQL</a></li> <li><a href="http://renzaijianghu.cnblogs.com" target="_blank">前端观察</a></li> <li><a href="http://renzaijianghu.cnblogs.com" target="_blank">HTML5/移动WEB应用</a></li> </ul> </li> <li><a href="http://renzaijianghu.cnblogs.com/about.html" target="_blank">关于</a></li> </ul> </div> </div> </body> </html>
accordion.js
/* * jQuery UI Multilevel Accordion v.1 * * Copyright (c) 2011 Pieter Pareit * * http://www.scriptbreaker.com * */ //plugin definition (function($){ $.fn.extend({ //pass the options variable to the function accordion: function(options) { var defaults = { accordion: 'true', speed: 300, closedSign: '[+]', openedSign: '[-]' }; // Extend our default options with those provided. var opts = $.extend(defaults, options); //Assign current element to variable, in this case is UL element var $this = $(this); //add a mark [+] to a multilevel menu $this.find("li").each(function() { if($(this).find("ul").size() != 0){ //add the multilevel sign next to the link $(this).find("a:first").append("<span>"+ opts.closedSign +"</span>"); //avoid jumping to the top of the page when the href is an # if($(this).find("a:first").attr('href') == "#"){ $(this).find("a:first").click(function(){return false;}); } } }); //open active level $this.find("li.active").each(function() { $(this).parents("ul").slideDown(opts.speed); $(this).parents("ul").parent("li").find("span:first").html(opts.openedSign); }); $this.find("li a").click(function() { if($(this).parent().find("ul").size() != 0){ if(opts.accordion){ //Do nothing when the list is open if(!$(this).parent().find("ul").is(':visible')){ parents = $(this).parent().parents("ul"); visible = $this.find("ul:visible"); visible.each(function(visibleIndex){ var close = true; parents.each(function(parentIndex){ if(parents[parentIndex] == visible[visibleIndex]){ close = false; return false; } }); if(close){ if($(this).parent().find("ul") != visible[visibleIndex]){ $(visible[visibleIndex]).slideUp(opts.speed, function(){ $(this).parent("li").find("span:first").html(opts.closedSign); }); } } }); } } if($(this).parent().find("ul:first").is(":visible")){ $(this).parent().find("ul:first").slideUp(opts.speed, function(){ $(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign); }); }else{ $(this).parent().find("ul:first").slideDown(opts.speed, function(){ $(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign); }); } } }); } }); })(jQuery);