大家好,我想问一下我的代码有什么问题。这是情况。鉴于我有这样一个对象:
var nav = [
{name:"home", subNav: []},
{name:"shop",
subNav: [
{name:"inner1", subNav: []},
{name:"inner2",
subNav: [
{name:"inner3", subNav: []},
{name:"inner4", subNav: []}
]}
]},
{name:"about", subNav: []},
{name:"contact", subNav: []},
];
将每个对象的名称附加到一个html元素,但如果它的subnav有一个长度图,那么它也会附加它,依此类推。我现在拥有的是这样的。
$('.nav').html('');
var navs = "";
var nav = [
{name:"home", subNav: []},
{name:"shop",
subNav: [
{name:"inner1", subNav: []},
{name:"inner2",
subNav: [
{name:"inner3", subNav: []},
{name:"inner4", subNav: []}
]}
]},
{name:"about", subNav: []},
{name:"contact", subNav: []},
];
nav.forEach(function(n) {
if (n.subNav.length > 0) {
navs = '<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">' + n.name + '<span class="caret"></span></a>';
navs += '<ul class="dropdown-menu">';
//map subnav of first parent
n.subNav.map(function(i) {
navs += '<li><a href="/' + i.name + '">' + i.name + '</a></li>';
});
navs += '</ul>';
navs += '</li>';
//Edit
//this is where I will use getSubnav(n,ele)
} else {
navs = '<li class=""><a href="/' + n.name + '">' + n.name + '</a></li>';
}
$('.nav').append(navs);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
WebSiteName
</a>
</div>
<ul class="nav navbar-nav">
</ul>
</div>
</nav>
我希望inner2菜单与其父下拉菜单相同,因为它内部有一个数组。试图使用一个重复自身的函数,这样它就会调用自己,直到subNavs中没有更多数组并传入nav对象和要附加的元素,如下所示:getSubnav(n,navs)
&lt; - 插入if语句
function getSubnav(nav,ele){
ele ='<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">' + nav.name+ '<span class="caret"></span></a>';
ele +='<ul class="dropdown-menu">';
nav.subNav.map(function(i){
ele += '<li><a href="/' + i.name+ '">' + i.name + '</a></li>';
getSubNav(i,ele);
});
ele += '</ul>';
ele += '</li>';
}
答案 0 :(得分:1)
还需要CSS修复才能显示2级导航
$(document).ready(function() {
$('.nav').html('');
var navs = "";
var nav = [{
name: "home",
subNav: []
},
{
name: "shop",
subNav: [{
name: "inner1",
subNav: []
},
{
name: "inner2",
subNav: [{
name: "inner3",
subNav: []
}, {
name: "inner4",
subNav: [{
name: "inner4-A",
subNav: []
}]
}]
}
]
},
{
name: "about",
subNav: []
},
{
name: "contact",
subNav: []
},
];
function createNodeHavingSubNode(src, level2) {
var node = $('<li/>', {
class: (level2 === true) ? 'dropdown-submenu' : 'dropdown'
});
var anchorTag = $('<a/>', {
class: 'dropdown-toggle',
'data-toggle': 'dropdown',
text: src.name,
href: '#'
})
if (!level2) {
anchorTag.append('<span class="caret"></span>');
}
node.append(anchorTag);
return node;
}
function createSubNavNode(src) {
var li = $('<li/>');
var anchor = $('<a/>', {
href: '/' + src.name,
text: src.name
});
li.append(anchor);
return li;
}
function createSubNodes(data) {
var element = $('<ul/>', {
class: 'dropdown-menu'
});
$.each(data.subNav, function() {
var d = this;
if (typeof d.subNav !== 'undefined' && d.subNav.length > 0) {
element.append(createNodeHavingSubNode(d, true).append(createSubNodes(d)));
} else {
element.append(createSubNavNode(d))
}
});
return element;
}
var ul = $('<ul/>').addClass('nav').addClass('navbar-nav');
$.each(nav, function(n) {
var node = this;
if (typeof node.subNav !== 'undefined' && node.subNav.length > 0) {
ul.append(createNodeHavingSubNode(node).append(createSubNodes(node)));
} else {
ul.append(createSubNavNode(node));
}
});
$('.nav').append(ul);
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
WebSiteName
</a>
</div>
<ul class="nav navbar-nav">
</ul>
</div>
</nav>