Cet exemple utilise les données json pour assembler ul et li afin de réaliser le rendu
:
1 Préparer les données json :
Copier le code Le code est le suivant :
var menuData = [
{id:0,pid:-1,name:"订购产品",url:"",children:[
{id:1,pid:0, nom : "电脑配件",url :"http://www.jb51.net",enfants :[
{id:20,pid:1,name:"cpu",url:"http://www .jb51.net",enfants :[
{id:30,pid:20,name:"Intel",url:"http://www.jb51.net",enfants:[
{id : 3000,pid:30,name:"Intel 01",url:""},
{id:3001,pid:30,name:"Intel 02",url:""},
{ identifiant : 3002,pid:30,name:"Intel 03",url:""},
{id:3003,pid:30,name:"Intel 04",url:""},
{ identifiant : 3004,pid:30,name:"Intel 05",url:""},
{id:3005,pid:30,name:"Intel 06",url:""},
{ identifiant : 3006,pid:30,name:"Intel 07",url:""},
{id:3007,pid:30,name:"Intel 08",url:""},
{ identifiant : 3008,pid:30,name:"Intel 09",url:""}
]},
{id:31,pid:20,name:"AMD",url:"http://www " DMLA "AMD D "AMD D "AMD D 08",url:""},
{id:3108,pid:31,name:"AMD 09",url:""}
]}
) .net"},
{id:24,pid:1,name: "carte graphique",url:"http://www.jb51.net"},
{id:25,pid:1, nom:"moniteur",url:"http://www.jb51.net "},
.net"},
{id:27,pid:1,name:"Alimentation principale du châssis",url:"http://www.jb51. .net"},
{id:28,pid: 1,name:"Clavier et souris (filaires)",url:"http://www.jb51.net"},
:"http://www.jb51.net "}
", enfants : [
{id : 102, pid : 101, nom : " caméra », url : " http://www.jb51.net "},
{identifiant : 103 , pid: 101, nom:"Camera",url:"http://www.jb51.net"},
net"},
{id:112,pid:101,name:"Caméra ",url:"http://www.jb51.net"},
{id:113,pid:101,name :"Caméra",url:"http://www.jb51.net"},
"},
{id:115,pid:101,name:"Camera",url:"http://www.jb51.net"},
"Caméra",url:"http ://www.jb51.net"},
{id:117, pid:101, nom : "Caméra", url : "http://www.jb51.net }
,pid:201 ,name:"Camera",url:"http://www.jb51.net"}
;:401,nom : "Imprimante",url :"http://www.jb51.net "}. ",url:"http://www.jb51.net"},
{id:406, pid:401, nom : "Caméra", url : "http://www.jb51. net"},
,url:"http://www.jb51.net"},
> " ; :"Dernières nouvelles",url:""},
🎜>
Code 2.html :
Copier le code
Le code est le suivant :
< div id="menu">
3. js) : Je viens d'apprendre à écrire un plug-in jquery, et c'est un peu compliqué. Faisons avec
(function($){
$.fn.extend({
menu:function(options){
var defaults = {
data:[],
ulId:"baseMenu"
};
var options = $.extend(defaults, options);
// 开始拼接ul,li
$.each(options.data,function (je, 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(" identifiant ");
$(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);
}