0
我有这个jQuery脚本从json树输出HTML菜单。jQuery - 隐藏主ul单击子菜单
$(function() {
var data = {
menu: [{
name: 'Croatia',
link: '0',
sub: null
}, {
name: 'England',
link: '1',
sub: [{
name: 'Arsenal',
link: '0-0',
sub: null
}, {
name: 'Liverpool',
link: '0-1',
sub: null
}, {
name: 'Manchester United',
link: '0-2',
sub: null
}]
}, {
name: 'Spain',
link: '2',
sub: [{
name: 'Barcelona',
link: '2-0',
sub: null
}, {
name: 'Real Madrid',
link: '2-1',
sub: null
}]
}, {
name: 'Germany',
link: '3',
sub: [{
name: 'Bayern Munich',
link: '3-1',
sub: null
}, {
name: 'Borrusia Dortmund',
link: '3-2',
sub: null
}]
}]
};
var getMenuItem = function (itemData) {
var item = $("<li>")
.append(
$("<a>", {
href: '#' + itemData.link,
html: itemData.name
}));
if (itemData.sub) {
var subList = $("<ul>");
$.each(itemData.sub, function() {
subList.append(getMenuItem(this));
});
item.append(subList);
}
return item;
};
var $menu = $("#menu");
$.each(data.menu, function() {
$menu.append(
getMenuItem(this)
);
});
$menu.menu();
});
和HTML:
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<ul id="menu"></ul>
,没有工作,它输出HTML菜单,但我想子菜单的被隐藏,直到访问者点击就可以了。
所以把它清除掉,我们把这个菜单,例如:
Primary Menu 1
- Submenu item 1
- Submenu item 1
Primary Menu 2
- Submenu item 2
- Submenu item 2
一旦访问者点击“主菜单1”,就应该隐藏所有的主菜单的,只显示子菜单项。
我该如何获得这个结果?
更新;设法得到它工作正常(JSON也装载在不同的文件了。)
$(window).load(function(){
$(function() {
var getMenuItem = function (itemData) {
var item = $("<li>")
.append(
$("<a>", {
href: '#' + itemData.link,
html: itemData.name
}));
if (itemData.sub) {
var subList = $('<ul>', {'class':'sub-menu'});
$.each(itemData.sub, function() {
subList.append(getMenuItem(this));
});
item.append(subList);
}
return item;
};
var $menu = $("#menu");
$.each(data.menu, function() {
$menu.append(
getMenuItem(this)
);
});
$(".sub-menu").hide();
$("li").click(function (e) {
e.stopPropagation();
$(this).children('ul').slideToggle();
});
});
});
谢谢,这有助于很多。就像你说的那样,它并没有完全奏效,但我会让它工作,这是一个很好的kickstarter! – Mitch
没问题!对不起,代码不适合你,但我认为这个问题更像是'概念',而不是编码问题。我知道至少这会让你走上正轨:) – lscmaro