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 相关文章推荐
农历与西历对照
Sep 06 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
jQuery 一个图片切换的插件
2011/10/09 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
超市重阳节活动方案
2014/02/10 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年科协工作总结
2015/05/19 职场文书
运动会入场词
2015/07/18 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang