jquery 無限ドロップダウンの簡単な実装コード menu_jquery

この例では、json データを使用して ul と li を結合し、



1 を実現します。 >

コードをコピー コードは次のとおりです:

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 、名前:「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:""}
]}
)、名前:「ハードドライブ」、URL:「http://www.jb51.net」}、
.net"},
{id:24,pid:1,name: "グラフィックス カード",url:"http://www.jb51.net"},
{id:25,pid:1, name:"モニター",url:"http://www.jb51.net "},
. .net"}、
{id:27、pid:1、name:"メインシャーシ電源"、url:"http://www.jb5 1.net"}、
{id:28,pid: 1,name:"キーボードとマウス (有線)",url:"http://www.jb51.net"},
:"http://www.jb51.net "}
"、子: [
{id: 102、pid: 101、名前:" カメラ "、url:" 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"}
🎜> :401、名前:「プリンター」 :"http://www.jb51.net"}",url:"http://www.jb51.net"},

{id:406、pid:401、名前: "カメラ"、url: "http://www.jb51. net "}、
、url：" http：//www.jb51.net "}、
>;" "}
："最新ニュース "、url：" "}、
🎜>
2.html コード:




コードをコピー


コードは次のとおりです:


< div id="menu">

3. json データを解析します (plugin-menu. js ファイル) : jquery プラグインの書き方を学んだところですが、少し面倒なので、これでなんとかしましょう

コードをコピーします

コードは次のとおりです:

(function($){
$.fn.extend({
menu:function(options){
vardefaults = {
data:[],
ulId:"baseMenu"
};
var options = $.extend(defaults, options);
// 开始拼接ul,li
$.each(options.data,function) (私、 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==未定義||data.children==未定義){
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!=unknown){
_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:なし;}
#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{表示:なし;幅:150px;位置:絶対;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;トップ:0px;}