我已经制作了这个JSON菜单,但很难在其父LI中获得子菜单UL - 有没有人有任何想法我需要在这里调整?
JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// lets do some JSON magic and make a menu!
JSON = {
"menu":[
{
"id":"contact",
"leaf":true,
"description":"Contact Us",
"link":"",
"content":"contactUs.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"rules",
"leaf":false,
"description":"Sports Betting Rules",
"link":"",
"content":"",
"cssClass":"",
"menu":[
{
"id":"types",
"leaf":true,
"description":"Wager Types",
"link":"",
"content":"wagerTypes.html",
"cssClass":"static-content wager-types",
"menu":null
},
{
"id":"odds",
"leaf":true,
"description":"Odds & Lines",
"link":"",
"content":"oddsAndLines.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"policies",
"leaf":true,
"description":"Rules & Policies",
"link":"",
"content":"rulesAndPolicies.html",
"cssClass":"static-content rules-policies",
"menu":null
},
{
"id":"bonuses",
"leaf":true,
"description":"Sports Bonuses",
"link":"",
"content":"sportsBonuses.html",
"cssClass":"static-content",
"menu":null
}
]
},
{
"id":"conditions",
"leaf":false,
"description":"Terms & Conditions",
"link":"",
"content":"",
"cssClass":"",
"menu":[
{
"id":"termsOfService",
"leaf":true,
"description":"Terms of Service",
"link":"",
"content":"termsOfService.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"privacy",
"leaf":true,
"description":"Privacy Policy",
"link":"",
"content":"privacy.html",
"cssClass":"static-content",
"menu":null
}
]
},
{
"id":"view",
"leaf":true,
"description":"View in: Mobile | Full Site",
"link":"",
"content":"view.html",
"cssClass":"static-content",
"menu":null
}
]
}
$(document).ready(function () {
function buildMenu(ul, menu) {
for (var i = 0; i < menu.length; i++) {
var li = $(ul).append('<li id="'+menu[i].id+'" class="'+menu[i].leaf+' '+menu[i].cssClass+'"><a href="'+menu[i].link+'">'+menu[i].content+'</a></li>');
if (menu[i].menu!=null) {
var subul=$('<ul id="submenu-'+menu[i].id+'"></ul>');
$(li).append(subul);
buildMenu($(subul), menu[i].menu);
}
}
}
var menu = $(".main-menu");
buildMenu(menu, JSON.menu);
});
</script>
<div class="main-menu"></div>
答案 0 :(得分:0)
function buildMenu(element, menu) {
$.each(menu,function(key, obj) {
var li = element.append('<li id="'+obj.id+'" class="'+obj.leaf+' '+obj.cssClass+'"><a href="'+obj.link+'">'+obj.content+'</a></li>');
if (obj.menu!=null) {
var subul=$('<ul id="submenu-'+obj.id+'"></ul>');
$(li).append(subul);
buildMenu($(subul), obj.menu);
}
});
};
$(document).ready(function () {
var menu = $(".main-menu");
buildMenu(menu, JSON.menu);
});
&#13;
<ul class="main-menu">
</ul>
&#13;
答案 1 :(得分:0)
主要问题在于您的代码的以下几点:
var li = $(ul).append('<li id="'+menu[i].id+'" class="'+menu[i].leaf+' '+menu[i].cssClass+'"><a href="'+menu[i].link+'">'+menu[i].content+'</a></li>');
方法append
会根据您的想法返回<ul>
而非<li>
。所以代码不能像你想象的那样工作。要解决这个问题,请将代码行分成两部分:
var li = $('<li id="'+menu[i].id+'" class="'+menu[i].leaf+' '+menu[i].cssClass+'"><a href="'+menu[i].link+'">'+menu[i].content+'</a></li>');
$(ul).append(li);
这里的完整代码:
var JSON = {
"menu": [{
"id": "contact",
"leaf": true,
"description": "Contact Us",
"link": "",
"content": "contactUs.html",
"cssClass": "static-content",
"menu": null
}, {
"id": "rules",
"leaf": false,
"description": "Sports Betting Rules",
"link": "",
"content": "",
"cssClass": "",
"menu": [{
"id": "types",
"leaf": true,
"description": "Wager Types",
"link": "",
"content": "wagerTypes.html",
"cssClass": "static-content wager-types",
"menu": null
}, {
"id": "odds",
"leaf": true,
"description": "Odds & Lines",
"link": "",
"content": "oddsAndLines.html",
"cssClass": "static-content",
"menu": null
}, {
"id": "policies",
"leaf": true,
"description": "Rules & Policies",
"link": "",
"content": "rulesAndPolicies.html",
"cssClass": "static-content rules-policies",
"menu": null
}, {
"id": "bonuses",
"leaf": true,
"description": "Sports Bonuses",
"link": "",
"content": "sportsBonuses.html",
"cssClass": "static-content",
"menu": null
}]
}, {
"id": "conditions",
"leaf": false,
"description": "Terms & Conditions",
"link": "",
"content": "",
"cssClass": "",
"menu": [{
"id": "termsOfService",
"leaf": true,
"description": "Terms of Service",
"link": "",
"content": "termsOfService.html",
"cssClass": "static-content",
"menu": null
}, {
"id": "privacy",
"leaf": true,
"description": "Privacy Policy",
"link": "",
"content": "privacy.html",
"cssClass": "static-content",
"menu": null
}]
}, {
"id": "view",
"leaf": true,
"description": "View in: Mobile | Full Site",
"link": "",
"content": "view.html",
"cssClass": "static-content",
"menu": null
}]
};
$(document).ready(function() {
function buildMenu(ul, menu) {
for (var i = 0; i < menu.length; i++) {
var li = $('<li id="' + menu[i].id + '" class="' + menu[i].leaf + ' ' + menu[i].cssClass + '"><a href="' + menu[i].link + '">' + menu[i].content + '</a></li>');
$(ul).append(li);
if (menu[i].menu != null) {
var subul = $('<ul id="submenu-' + menu[i].id + '"></ul>');
$(li).append(subul);
buildMenu($(subul), menu[i].menu);
}
}
}
var menu = $(".main-menu");
buildMenu(menu, JSON.menu);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-menu"></ul>
&#13;
注意:我使用的是<ul class="main-menu"></ul>
而不是<div class="main-menu"></div>
,因为更正确。