jquery 無限下拉式選單的簡單實作程式碼_jquery

本範例使用json資料,拼接ul和li來實現的
效果圖：




1. 🎜>

複製程式碼 程式碼如下:

var menuData = [
            {id:0,pid:-1,name:"訂購產品",url:"",children:[  name:"電腦配件",url:"http://www.jb51.net",children:[
                    {id:20,pid:1,name:"cpu",url: .jb51.net",children:[
                                               {id: 3000，PID：30，名稱：“ Intel 01”，url：“”}，
{id：3001，pid：30，name：“ intel 02”，url：”}，
{id> {id> {ID： 3002，PID：30，名稱：“ Intel 03”，url：“”}，
{id：3003，pid：30，name：" intel 04”，url：""}，
{id> {id： 3004，PID：30，名稱：“ Intel 05”，url：“”}，
{id：3005，pid：30，name：“ intel 06”，url：“ ”}，
{id> {id： 3006，PID：30，名稱：“ Intel 07”，url：“”}，
{id：3007，pid：30，name：“ intel 08”， url：「」}，
{id> {id： 3008,pid:30,name:"Intel 09",url:""}
                           {id:31,pid:20 ,name:"AMD",url:"http://www .jb51.net",子項:[
                    
                            {id:3101,pid:31,姓名:AMD 021,01:3101,pid:31,姓名:AMD 0216:02:3101,pid:31,名稱:AMD 02               {id:3102,pid:31,名稱:"AMD 03",url:""},
                            {id:3103,pid:31,名稱:"AMD 04",url:"},               {id:3104,pid:31,名稱:"AMD 05",url:""},
                            {id:3105,pid:31,名稱:"AMD 06",url:"},               {id:3106,pid:31,名稱:"AMD 07",url:""},
                            {id:3107,pid:31,名稱:"AMD 08",url:"},               {id:3108,pid:31,name:"AMD 09",url:""}
                         ]}
                    ]},
            ,
                    {id:22,pid:1 ,name:"硬碟",url:"http://www.jb51.net"},
                    {id:23,pid:1,name:"主機板",url:51http .net"},
                    {id:24,pid:1,name:"顯卡",url:"http     {id:25,pid:1, name:"顯示器",url:"http://www.jb51.net"},
                   {id:26,pid:1,name:"主機箱",url:    {id:26,pjid:1,name:"主機箱",url:"http .net"},
                   以 {id:27,pid:1,name:"主機箱電源」,url    {id:28,pid: 1,name:"鍵鼠(有線)",url:"http://www.jb51.net"},
                 :"http://www.jb51.net"}
                ],url:"http://www.jb51.net"},
                {id:101,pid:0,name:"監控器材",children:[
                    {id:102,pid:101,name:"攝影機",url:"http://www.jb51.net"},      {id:103,pid:101, name:"相機",url:"http://www.jb51.net"},
                    {id:104,pid:101,name:"http net"},
                    {id:112,pid:101,name:"相機",url:"http://www.jb51.net"},                   {id:114,pid:101,name:      {id:114,pid:101,name:      {id:114,pid:101,name:"http "},
                    {id:115,pid:101,name:"相機",url:"http    {id:116,pid:101,name: "相機",url:"http://www.jb51.net"},
                    {id:117,pid:101,name:      {id:117,pid:101,name:      {id:117,pid:101,name:"http://www:51://www. }
                ],url:"http://www.jb51.net"},
                          {id:202 ,pid:201,name:"攝像頭",url:"http://www.jb51.net"}
                ],url:"http://www.jb51.net"},
                {id :301,pid:0,name:"網路產品",children:[
                    {id:302,pid:301,name:      {id:302,pid:301,name:      {id:302,pid:301,name:"http 🎜>                ],url:"http://www.jb51.net"},
                           {id:402,pid :401,name:"印表機",url:"http://www.jb51.net"},
                    {id:403,pid:401,name:"油墨",url:"http://www.jb51.net"),                   由 {id:405,pid:401,name:"相機",jurl:"http://www.jb:"http://www.jb:"http://www.jb:"http://www.jb
                   , {id:406,pid:401,name:"攝影機",url:"http://www.jb51.net"},,                    {id:408,pid:401,name:"攝影機「相機」,url:"http://www.jb >                ],url:"http://www.jb51.net"}
          "我的訂單",url:"",children :[
                {id:1001,pid:1000,name:"已過期訂單",url:""},            ]},
            {id:2000,pid:     {id:2001,pid:2000,name :"最新新聞",url:""},
                {id:2002,pid:2000,name:"公司地址   ];


2.html代碼:




複製程式碼

代碼如下:

代碼如下:

3.解析json資料(plugin-menu.js檔):剛學會寫jquery插件,寫的還比較亂,湊合著看吧

複製程式碼

程式碼如下:

(function($){
    $.fn.extend({
        選單:函數(選項          資料:[],
ulId:"baseMenu"
            };
             li
            $.each(options.data,function(i, v){
                var li = $("

"' name='" options.data[i].pid "'> ");
                var _a = $("" options.data[i].name "");                   .appendTo(li);

                 li.appendTo($("#" options.ulId));
            });
            // 為li新增事件
            $(this).find("li id = $(this).attr("id ");
                $(this).find("ul[name='" id "']").show();
          var id = $(this) .attr("id ");
                $(this).find("ul[name='" id "']").hide();    } );
})(jQuery);


支持因為無限級，所以肯定會使用分區方法：




複製代碼


程式碼如下：

function _each(data,li){

    if(data==undefined||data.children==undefined){  >    }    var ul = $("

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

");        var _a = $("" data.children[i].name "");

     . attr("href",data.children[i].url)

            .attr("target","_blank")
      if( data.children[ i].children!=undefined){
            _each(data.children[i],_li);
      ;
    ul.appendTo 。 ：


$(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:無;}
#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{顯示:無;寬度:150px;位置:絕對;背景:#c1cd94;box-shadow:2px 2px 2px #000;-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #123; #選單>ul>li>ul li{padding-left:5px;位置：相對;}
#menu>ul>li>ul li>a{color:#000;}
#menu>ul> li>ul li:hover{背景:#d3dbb3;}
#選單>ul>li>ul>li ul{左：150px;頂部：0px;}