jquery 无限级下拉菜单的简单实现代码


Posted in Javascript onFebruary 21, 2014

本例子使用json数据,拼接ul和li来实现的
效果图:

jquery 无限级下拉菜单的简单实现代码

1.准备json数据:

var menuData = [
            {id:0,pid:-1,name:"订购产品",url:"",children:[
                {id:1,pid:0,name:"电脑配件",url:"https://3water.com",children:[
                    {id:20,pid:1,name:"cpu",url:"https://3water.com",children:[
                        {id:30,pid:20,name:"Intel",url:"https://3water.com",children:[
                            {id:3000,pid:30,name:"Intel 01",url:""},
                            {id:3001,pid:30,name:"Intel 02",url:""},
                            {id:3002,pid:30,name:"Intel 03",url:""},
                            {id:3003,pid:30,name:"Intel 04",url:""},
                            {id:3004,pid:30,name:"Intel 05",url:""},
                            {id:3005,pid:30,name:"Intel 06",url:""},
                            {id:3006,pid:30,name:"Intel 07",url:""},
                            {id:3007,pid:30,name:"Intel 08",url:""},
                            {id:3008,pid:30,name:"Intel 09",url:""}
                        ]},
                        {id:31,pid:20,name:"AMD",url:"https://3water.com",children:[
                            {id:3100,pid:31,name:"AMD 01",url:""},
                            {id:3101,pid:31,name:"AMD 02",url:""},
                            {id:3102,pid:31,name:"AMD 03",url:""},
                            {id:3103,pid:31,name:"AMD 04",url:""},
                            {id:3104,pid:31,name:"AMD 05",url:""},
                            {id:3105,pid:31,name:"AMD 06",url:""},
                            {id:3106,pid:31,name:"AMD 07",url:""},
                            {id:3107,pid:31,name:"AMD 08",url:""},
                            {id:3108,pid:31,name:"AMD 09",url:""}
                        ]}
                    ]},
                    {id:21,pid:1,name:"内存",url:"https://3water.com"},
                    {id:22,pid:1,name:"硬盘",url:"https://3water.com"},
                    {id:23,pid:1,name:"主板",url:"https://3water.com"},
                    {id:24,pid:1,name:"显卡",url:"https://3water.com"},
                    {id:25,pid:1,name:"显示器",url:"https://3water.com"},
                    {id:26,pid:1,name:"主机箱",url:"https://3water.com"},
                    {id:27,pid:1,name:"主机箱电源",url:"https://3water.com"},
                    {id:28,pid:1,name:"键鼠(有线)",url:"https://3water.com"},
                    {id:29,pid:1,name:"键鼠(无线)",url:"https://3water.com"}
                ],url:"https://3water.com"},
                {id:101,pid:0,name:"监控器材",children:[
                    {id:102,pid:101,name:"摄像头",url:"https://3water.com"},
                    {id:103,pid:101,name:"摄像头",url:"https://3water.com"},
                    {id:104,pid:101,name:"摄像头",url:"https://3water.com"},
                    {id:112,pid:101,name:"摄像头",url:"https://3water.com"},
                    {id:113,pid:101,name:"摄像头",url:"https://3water.com"},
                    {id:114,pid:101,name:"摄像头",url:"https://3water.com"},
                    {id:115,pid:101,name:"摄像头",url:"https://3water.com"},
                    {id:116,pid:101,name:"摄像头",url:"https://3water.com"},
                    {id:117,pid:101,name:"摄像头",url:"https://3water.com"}
                ],url:"https://3water.com"},
                {id:201,pid:0,name:"数码产品",children:[
                    {id:202,pid:201,name:"摄像头",url:"https://3water.com"}
                ],url:"https://3water.com"},
                {id:301,pid:0,name:"网络产品",children:[
                    {id:302,pid:301,name:"摄像头",url:"https://3water.com"}
                ],url:"https://3water.com"},
                {id:401,pid:0,name:"打印耗材",children:[
                    {id:402,pid:401,name:"打印机",url:"https://3water.com"},
                    {id:403,pid:401,name:"油墨",url:"https://3water.com"},
                    {id:404,pid:401,name:"纸张",url:"https://3water.com"},
                    {id:405,pid:401,name:"摄像头",url:"https://3water.com"},
                    {id:406,pid:401,name:"摄像头",url:"https://3water.com"},
                    {id:407,pid:401,name:"摄像头",url:"https://3water.com"},
                    {id:408,pid:401,name:"摄像头",url:"https://3water.com"}
                ],url:"https://3water.com"}
            ]},
            {id:1000,pid:-1,name:"我的订单",url:"",children:[
                {id:1001,pid:1000,name:"已过期订单",url:""},
                {id:1001,pid:1000,name:"已付款订单",url:""}
            ]},
            {id:2000,pid:-1,name:"公司信息",url:"",children:[
                {id:2001,pid:2000,name:"最新新闻",url:""},
                {id:2002,pid:2000,name:"公司地址",url:""}
            ]}
        ];

2.html代码:
<div id="menu"><ul id="baseMenu"></ul></div>

3.解析json数据(plugin-menu.js文件):刚学会写jquery插件,写的还比较乱,凑合着看吧
(function($){
    $.fn.extend({
        menu:function(options){
            var defaults = {
                data:[],
                ulId:"baseMenu"
            };
            var options = $.extend(defaults, options);
            // 开始拼接ul,li
            $.each(options.data,function(i,v){
                var li = $("<li id='"+options.data[i].id+"' name='"+options.data[i].pid+"'></li>");
                var _a = $("<a>"+options.data[i].name+"</a>");
                _a.attr("href",options.data[i].url)
                    .appendTo(li);                _each(options.data[i],li);
                li.appendTo($("#"+options.ulId));
            });
            // 给li添加事件
            $(this).find("li").hover(function(){
                var id = $(this).attr("id");
                $(this).find("ul[name='"+id+"']").show();
            },function(){
                var id = $(this).attr("id");
                $(this).find("ul[name='"+id+"']").hide();
            });
        }
    });
})(jQuery);

因为支持无限级,所以肯定会用到递归方法:
function _each(data,li){
    if(data==undefined||data.children==undefined){
        return false;
    }
    var ul = $("<ul name='"+data.id+"' style='display:none;'></ul>");    $.each(data.children,function(i,v){
        var _li = $("<li id='"+data.children[i].id+"' name='"+data.children[i].pid+"'></li>");
        var _a = $("<a>"+data.children[i].name+"</a>");
        _a.attr("href",data.children[i].url)
            .attr("target","_blank")
            .appendTo(_li);
        if(data.children[i].children!=undefined){
            _each(data.children[i],_li);
        }
        _li.appendTo(ul);
    });
    ul.appendTo(li);
}

4.调用插件:
$(function() {
    $("#menu").menu({data:menuData,ulId:"baseMenu"});
});

最后,css样式:
ul,li{list-style:none;padding:0px;margin:0px;}
#menu *{line-height:30px;}
#menu a{text-decoration:none;}
#menu ul{text-align:left;}
#menu>ul>li{text-align:center;width:80px;float:left;}
#menu>ul>li>a{color:#000;}
#menu>ul>li:hover{background:#F0F0F0;}
#menu>ul>li ul{display:none;width:150px;position:absolute;background:#c1cd94;box-shadow:2px 2px 2px #000;-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #123;}
#menu>ul>li>ul li{padding-left:5px; position:relative;}
#menu>ul>li>ul li>a{color:#000;}
#menu>ul>li>ul li:hover{background:#d3dbb3;}
#menu>ul>li>ul>li ul{left:150px; top:0px;}
Javascript 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
js实现拾色器插件(ColorPicker)
May 21 Javascript
jQuery 无限级菜单的简单实例
Feb 21 #Javascript
js控制table合并具体实现
Feb 20 #Javascript
js文件Cookie存取值示例代码
Feb 20 #Javascript
js中array的sort()方法使用介绍
Feb 20 #Javascript
javascript生成随机大小写字母的方法
Feb 20 #Javascript
将json对象转换为字符串的方法
Feb 20 #Javascript
javascript实现json页面分页实例代码
Feb 20 #Javascript
You might like
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
js实现简单计算器
2015/11/22 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
学年自我鉴定范文
2013/10/01 职场文书
上班睡觉检讨书
2014/01/09 职场文书
公司聘任书模板
2014/03/29 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
六年级学生评语大全
2014/12/26 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书