jQuery - 单击子菜单后隐藏主 ul

Question

我有这个jQuery脚本，它从json树输出HTML菜单。

$(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();
});
});
});

Answer 1

在所有菜单创建代码之后，您需要首先向所有具有子菜单的菜单项添加一个类。您可以在创建代码中执行此操作。

var subList = $('<ul>', {'class':'sub-menu'});

从那里你应该能够知道哪些菜单项有子菜单，你可以从那里做各种事情。

一个例子是，在 css 中为sub-menu提供默认高度0。然后将点击事件添加到<ul class="sub-menu">父<li>，以动画显示菜单高度，同时将类添加到<li>知道它何时打开或关闭。

$('.sub-menu').parent().on('click', function(){
$(this).toggleClass('active');
if ($(this).hasClass('active')){
$(this).children('.sub-menu').animate({'height':'auto');
} else {
$(this).children('.sub-menu').animate({'height':'0');
}
});

您甚至可以更进一步，检查所有具有子菜单的菜单项，以确保在打开新菜单之前是否关闭了先前打开的菜单项。

//Inside the previous click handler as the 1st thing in it.
$(this).siblings().removeClass('active');

如果该代码适用于您的情况(取决于现有样式(，则不是 100%，但它应该为您提供您想要实现的想法。