前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴在园子里了。效果图片如下:

aaarticlea/png;base64,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" alt="" />

上图片展示的是三级,应该还可以根据自己的需要扩展多级的。

不想下载的朋友可以直接复制源码内容,总共三个文件,一个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: ,
closedSign: '[+]',
openedSign: '[-]'
});
});
</script>
<style>
ul{list-style:none}
.demo{width:300px; margin:40px auto; padding:10px; background:#f7f7f7}
.nav {width: 213px; padding: 40px 28px 25px ; font-family: "Microsoft yahei", Arial, Helvetica, sans-serif;}
ul.nav {padding: ; margin: ; font-size: 1em; line-height: .5em; list-style: none;}
ul.nav li {}
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #; display: block; text-decoration: none; font-weight: bolder;}
ul.nav li a:hover {background-color:#675C7C; color:white;}
ul.nav ul { margin: ; padding: ;display: none;}
ul.nav ul li { margin: ; padding: ; 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: ,
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() != ){
//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() != ){
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);

源码下载

jQuery实现多级手风琴树形下拉菜单(源码)的更多相关文章

  1. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  2. jQuery插件:模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  3. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  4. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  5. jQuery 实现无限任意添加下拉菜单

    新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...

  6. js递归生成树形下拉菜单

    需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...

  7. [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项,若有重置再提示

    今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...

  8. jquery多级树形下拉菜单

    效果图: 使用方法 (1)引入 jQuery 包,下载地址 (2)引入 zTree 包,下载地址 (3)引入 tree-select.js (4)$("#id").treeSele ...

  9. 实例:用jQuery实现垂直和水平下拉 菜单

    主要是利用jQuery来实现垂直菜单和水平菜单.实现效果如图: 第一步,创建一个HTML文件,如图,包含两个ul.当然把jquery库也引入进去了. <!DOCTYPE html> < ...

随机推荐

  1. BZOJ2661: [BeiJing wc2012]连连看

    2661: [BeiJing wc2012]连连看 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 483  Solved: 200[Submit][S ...

  2. SharePoint 2010 安装简介及相关补丁下载

    转:http://www.cnblogs.com/jianyus/archive/2011/10/28/2228212.html 1.安装Windows Server 2008 系统,这个我就不说了, ...

  3. Windows Server AppFabric 安装文档

    安装指南 入门标题页 3 Windows Server AppFabric 安装和配置指南 3 版权 3 版权所有 3 简介 3 清单:规划安装 4 硬件要求 4 使计算机作好安装准备 5 本节内容 ...

  4. selenium webdriver(1)---浏览器操作

    启动浏览器 如何启动浏览器已在上篇文章中说明,这里还是以chrome为例,firefox.IE启动方式相同. //启动浏览器 import org.openqa.selenium.WebDriver; ...

  5. 通过udl文件得到连接字符串

    1.新建一个文件,文件名任意,扩展名为udl 2.双击打开这个udl文件 3.点下一步: 4.测试连接成功后点击确定 5.用记事本打开这个udl文件: 连接字符串就出来了

  6. Android项目开发全程(三)-- 项目的前期搭建、网络请求封装是怎样实现的

    在前两篇博文中已经做了铺垫,下面咱们就可以用前面介绍过的内容开始做一个小项目了(项目中会用到Afinal框架,不会用Afinal的童鞋可以先看一下上一篇博文),正所谓麻雀虽小,五脏俱全,这在里我会尽量 ...

  7. Linux常用命令收集

    rsync -avH --progress felix/ /home/magnum/work-environment/ 同步本地文件夹,异常中断后仍然可以续传 rsync -avH --progres ...

  8. [LeetCode] 42. Trapping Rain Water 解题思路

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  9. iOS开发笔记之TableView优化

    TableView相信只要是做iOS开发的就不会陌生,目前大多数iOS的app都是采用TabBar+NavigationBar+TableViewController这一主流框架, 既然用的这么频繁, ...

  10. HTML头部<head>学习

    元素是所有头部元素的容器. 元素包含了所有的头部标签元素.在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息. 以下标签都可以添加到 head 部分: 1.title ...