使用load方法加载右侧内容 空白啊 请大神解决!!!!!
右侧菜单生成节点,动态加载,代码:
function createMenu(data){
var menuArr = {
level1 : [],
level2 : [],
level3 : []
};
var menuObj = {
level1 : {},
level2 : {}
};
var treeData = data.modules;
var $tree = $("#navigation");
var $main = $('<li class="active">'
+'<a href="index.html">'
+'<i class="menu-icon ti-desktop"></i>'
+'<span class="mm-text">首页</span>'
+'</a>'
+'</li>').appendTo($tree);
var arr;
// 二级菜单所在ul
var $subul1 = $('<ul></ul>').addClass("sub-menu");
// 三级菜单所在ul 包含在二级菜单li中
var $subul2 = $('<ul></ul>').addClass("sub-menu");
$main.click(function(){
com.switchPage('index.html');
return false;
});
if(!treeData || !treeData.length){
return;
}
$.each(treeData , function(i, v){
arr = menuArr['level' + v.level]
arr[arr.length] = v;
});
$.each(menuArr, function(key, val){
menuArr[key] = val.sort(function(a,b){
return a.order-b.order
});
});
if(menuArr.level1.length){
$.each(menuArr.level1, function(i, v){
var $li = $('<li></li>').addClass("menu-dropdown");
var $a = $('<a href="#"></a>');
var $i = $('<i></i>').addClass("menu-icon ti-check-box");
var $span = $('<span></span>').text(v.name);
var $span2 = $('<span></span>').addClass("fa arrow");
$a.append($i).append($span).append($span2).appendTo($li);
$subul2.appendTo($li);
menuObj.level1[v.mid] = $li;
$li.appendTo($tree);
});
}/* √ */
if(menuArr.level2.length){
$.each(menuArr.level2, function(i, v){
var $li = $('<li></li>');
var $a = $('<a></a>').attr('href', v.url ? v.url : '#');
var $i = $('<i></i>').addClass("fa fa-fw ti-receipt");
var $span = $('<span></span>').text(v.name);
var $span2 = $('<span></span>');/*.addClass('fa arrow');*/
$a.append($i).append($span).append($span2).appendTo($li);
menuObj.level2[v.mid] = $li;
var $parent = menuObj.level1[v.fatherModule.mid];
$parent.children('a').children('b').length || $('<b></b>').appendTo($parent.children('a'));
var $pul = $parent.children('ul').length ? $parent.children('ul') : $('<ul></ul>').addClass('sub-menu').addClass('show_none').appendTo($parent);
$li.appendTo($pul);
});
}
if(menuArr.level3.length){
$.each(menuArr.level3, function(i, v){
var $li = $('<li></li>');
var $a = $('<a></a>').attr('href', v.url ? v.url : '#');
var $i = $('<i></i>').addClass("fa fa-fw ti-flag-alt");
var $span = $('<span></span>').text(v.name);
$a.append($i).append($span).appendTo($li);
var $parent = menuObj.level2[v.fatherModule.mid];
$parent.children('a').children('b').length || $('<b></b>').appendTo($parent.children('a'));
var $pul = $parent.children('ul').length ? $parent.children('ul') : $('<ul></ul>').addClass('sub-menu p-1-40 left_margin').addClass('show_none').appendTo($parent);
$li.appendTo($pul);
});
}
$("a", $tree).unbind().bind("click", function(e){
$this = $(this);
navControl($this);
var hrefStr = $this.attr("href");
if($this.siblings('ul').length){
if(!$this.parent('li').hasClass('active')){
$this.parent('li').removeClass('show_none');
$this.parent('li').children('ul').removeClass('show_none');
$this.parent('li').toggleClass('open');
$this.parent('li').siblings('li').not('.active').removeClass('open');
$this.parent('li').siblings('li').not('.active').children('ul').addClass('show_none');
}
}else{
if(hrefStr != "#" && hrefStr!="null" && hrefStr != undefined){
com.switchPage(hrefStr);
$('.active').not($this.parents('li')).removeClass('active').removeClass('open');
$this.parent('li').addClass('active');
$this.parents('#navigation > li').addClass('active');
}
}
e.preventDefault();
});
}
function navControl($this){
if($this.data('level') == 1){
$('.level1').removeClass('level1');
$this.addClass('level1');
if($this.attr('href')!='#'){
$('ul.breadcrumb .nav1').html("<i class='"+$('i', $this).attr('class')+"'></i> "+$this.text());
$('ul.breadcrumb .nav2').hide();
$('ul.breadcrumb .nav3').hide();
}
}else if($this.data('level') == 2){
$('.level2').removeClass('level2');
$this.addClass('level2');
if($this.attr('href')!='#'){
$('ul.breadcrumb .nav1').html("<i class='"+$('.nav-list .level1 i').attr('class')+"'></i> "+$('.nav-list .level1').text());
$a = $('<a href='+$this.attr("href")+'>'+$this.text()+'</a>');
$('ul.breadcrumb .nav2').show().html($a);
$('ul.breadcrumb .nav3').hide();
$a.on('click', function(e){
e.preventDefault();
com.switchPage(e.target.href);
});
}
}else if($this.data('level') == 3){
$('.level3').removeClass('level3');
$this.addClass('level3');
if($this.attr('href')!='#'){
$('ul.breadcrumb .nav1').html("<i class='"+$('.nav-list .level1 i').attr('class')+"'></i> "+$('.nav-list .level1').text());
$('ul.breadcrumb .nav2').show().text($('.nav-list .level2').text());
$a = $('<a href='+$this.attr("href")+'>'+$this.text()+'</a>');
$('ul.breadcrumb .nav3').show().html($a);
$a.on('click', function(e){
e.preventDefault();
com.switchPage(e.target.href);
});
}
}
switch方法:
switchPage: function(url, data, callback){
$("#fl-container").load(url, data, function(response, status, xhr){
callback && callback(response, status, xhr);
});
所有的右侧页面都显示在fl-container中,当点击一个菜单时显示页面,其余的点击就不显示了啊,,求解!!!!