집 >웹 프론트엔드 >JS 튜토리얼 >jquery 무한 드롭다운 menu_jquery에 대한 간단한 구현 코드

jquery 무한 드롭다운 menu_jquery에 대한 간단한 구현 코드

WBOY원래의: 2016-05-16 16:59:09960검색

이 예에서는 json 데이터를 사용하여 ul과 li를 연결하여
렌더링을 구현합니다.

1. json 데이터 준비:

코드 복사 코드는 다음과 같습니다.

var menuData = [
            {id:0,pid:-1,name:"订购产품",url:"",children:[
                {id:1,pid:0, 이름:"电脑配件",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:""},
                        아이디: 3002,pid:30,name:"Intel 03",url:""},
                         {id:3003,pid:30,name:"Intel 04",url:""},
                         { 아이디: { 아이디: { 아이디: 3008,pid:30,이름:"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:"AM 디 04",url:""},
                          {id:3104,pid:31,name:"AMD 05",url:""},
                        {id:3105,pid:31,name:"AM 디 06",url:""},
                          {id:3106,pid:31,name:"AMD 07",url:""},
                        {id:3107,pid:31,name:"AM 디 08",url:""},
                           {id:3108,pid:31,name:"AMD 09",url:""}
                      ]}
                                  ), ,name:"하드 드라이브",url:"http://www.jb51.net"},
                             > "그래픽 카드",url:"http://www.jb51.net"},
 {id:25,pid:1, 이름:"monitor",url:"http://www.jb51.net "},
                                                                                                   > .net"},
 {id:28,pid: 1,name:"키보드 및 마우스(유선)",url:"http://www.jb51.net"},
                                                                                                                 :"http://www.jb51.net "}
                                                                                                   
 {id: 103 , pid: 101, 이름:"카메라",url:"http://www.jb51.net"},
                                                                     | 
 {id:112,pid:101,name:"카메라 ",url:"http://www.jb51.net"},
 {id:113,pid:101,name :"카메라",url:"http://www.jb51.net"}, 
                                                                                                                                           "},
 {id:115,pid:101,name:"카메라",url:"http://www.jb51.net"},
 "카메라",url:"http ://www.jb51.net"},
                                                  {id:117, pid:101, name: "Camera", url: "http://www.jb51.net" }
 ~                          ,pid:201 ,이름:"카메라",url:"http://www.jb51.net"}
                                                                              > > :"http://www.jb51.net"}. ",url:"http://www.jb51.net"},
                                                                                                                      
                     {id:406, pid:401, 이름: "카메라", URL: "http://www.jb51. net"}, 
                                                                                         ,url:"http://www.jb51.net"},
                                                                                                             ~    >                                                                                                             ~ ~ > 🎜>
2.html 코드:




코드 복사


 코드는 다음과 같습니다.


< div id="menu">

3.json 데이터 분석 js 파일) : 방금 jquery 플러그인 작성 방법을 배웠는데 좀 지저분합니다.

코드 복사 코드는 다음과 같습니다.

(function($){
    $.fn.extend({
        메뉴:기능(옵션){
            var 기본값 = {
               데이터:[],
ulId:"baseMenu"
            };
            var options = $.extend(defaults, options);
           // 开始拼接ul,li
            $.each(options.data, 함수(나, 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).att r("id ");
                $(this).find("ul[name='" id "']").show();
           },function(){
               var id = $(this) .attr("id");
                $(this).find("ul[name='" id "']").hide();
            });
        }
    } );
})(jQuery);

因为支持无限级,所以肯定会用到递归方法:

复aze代码

代码如下:function _each(data,li){ if(data==undefine||data.children==undefine){

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!=정의되지 않음){
            _each(data.children[i],_li);
        }
        _li.appendTo(ul);
    });
> 🎜> 代码如下:

$(function() {
    $("#menu").menu({data:menuData,ulId:"baseMenu"});
} );

最后,css样式:

复主代码代码如下:

ul,li{list-style:none;padding:0px;margin:0px;}
#menu *{line-height:30px;}
#menu a{텍스트 장식: none;}
#menu ul{text-align:left;}
#menu>ul>li{text-align:center;width:80px;float:left;}
#menu>ul> li>a{색상:#000;}
#menu>ul>li:hover{배경:#F0F0F0;}
#menu>ul>li ul{display:none;width:150px;position:absolute ;배경:#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; 위치:상대;}
#menu>ul>li>ul li>a{color:#000;}
#menu>ul>li>ul li:hover{배경:#d3dbb3;}
 #menu>ul>li>ul>li ul{왼쪽:150px; 상단:0px;}

성명：

이전 기사：$ 기호와 다른 JS 라이브러리 간의 충돌을 피하기 위한 jQuery의 방법 비교_jquery다음 기사：$ 기호와 다른 JS 라이브러리 간의 충돌을 피하기 위한 jQuery의 방법 비교_jquery

jquery 무한 드롭다운 menu_jquery에 대한 간단한 구현 코드

관련 기사