Home >Web Front-end >JS Tutorial >Simple implementation code for jquery infinite drop-down menu_jquery

Simple implementation code for jquery infinite drop-down menu_jquery

WBOYOriginal: 2016-05-16 16:59:09953browse

This example uses json data to splice ul and li to realize the
rendering:

1. Prepare json data:

Copy code The code is as follows:

var menuData = [
            {id:0,pid:-1,name:"订购产品",url:"",children:[
                {id:1,pid:0,name:"电脑配件",url:"http://www.jb51.net",children:[
                    {id:20,pid:1,name:"cpu",url:"http://www.jb51.net",children:[
                        {id:30,pid:20,name:"Intel",url:"http://www.jb51.net",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:"http://www.jb51.net",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:""}
                        ]}
                                      ), ,name:"hard drive",url:"http://www.jb51.net"},
                                                                                                                                          .net"},
 {id:24,pid:1,name:"graphics card",url:"http://www.jb51.net"},
 {id:25,pid:1, name:"monitor",url:"http://www.jb51.net"},
                                                                                                                                                                                                  . .net"},
 {id:27,pid:1,name:"main chassis power supply",url:"http://www.jb51.net"},
 {id:28,pid: 1,name:"Keyboard and mouse (wired)",url:"http://www.jb51.net"},
                                                                                                                                 :"http://www.jb51.net"}
                                                                                                                                                                                        ", children: [
 {id: 102, pid: 101, name:" camera ", url:" http://www.jb51.net "}, 
 {id: 103, pid: 101, name:"Camera",url:"http://www.jb51.net"},
                                                                                                                                                                                                      ; net"},
 {id:112,pid:101,name:"Camera",url:"http://www.jb51.net"},
 {id:113,pid:101,name :"Camera",url:"http://www.jb51.net"},
                                                                                                                                                     "},
 {id:115,pid:101,name:"Camera",url:"http://www.jb51.net"},
 "Camera",url:"http://www.jb51.net"},
                                                            {id:117, pid:101, name: "Camera", url: "http://www.jb51.net" }
                                                                                                                                             ,pid:201,name:"Camera",url:"http://www.jb51.net"}
                                                                                                                      ; 🎜>                                                                                                                                                                                                      :401,name:"Printer",url:"http://www.jb51.net"}. ",url:"http://www.jb51.net"},
                                                                                                                                            
                       {id:406, pid:401, name: "Camera", url: "http://www.jb51.net"}, 
                                                                                            ,url:"http://www.jb51.net"},
                                                                                                                                                                                                                                                    >                                                                                                                                                                                                                        ; ""}
                                                                                                                                                                                           ​:"Latest news",url:""},
                                                                                                                                                                                                                                                    🎜>
2.html code:




Copy code


 The code is as follows:


< div id="menu">

3. Parse json data (plugin-menu.js file) : I just learned to write a jquery plug-in, and it’s a bit messy. Let’s make do with it

Copy the code

The code is as follows:

(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 = $("

");
                var _a = $("" options.data[i].name "");
                _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 = $("");

    $.each(data.children,function(i,v){
        var _li = $("

");
        var _a = $("" data.children[i].name "");
        _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;}

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Comparison of jQuery's methods to avoid conflicts between the $ symbol and other JS libraries_jqueryNext article：Comparison of jQuery's methods to avoid conflicts between the $ symbol and other JS libraries_jquery

See more

Simple implementation code for jquery infinite drop-down menu_jquery

Related articles