javascript - 带有 jQuery json 数据的动态菜单
问题描述
我已经尝试过了,但它不起作用。我正在尝试从 jQuery json 数据制作动态菜单。我在下面插入预览。
我正在开发完全自定义的 UI,所以我打算不使用 jQuery.UI。
var data = {
menu: [{
name: 'Women Cloth',
link: '0',
sub: null
},{
name: 'Men Cloth',
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
}]
}]};
var getMenuItem = function (itemData) {
var item = $("<li>", {
class: 'has-children',
id: itemData.id
}).append(
$("<a>", {
href: itemData.link,
html: itemData.name,
id: itemData.id + '-links',
}));
if (itemData.sub) {
var subMenuItem = $("<li>", {
class: 'has-icon'
}).append(
$("<a>", {
href: itemData.link,
class: 'submenu-title',
}));
var subList = $("<ul>", {
class: 'secondary-dropdown',
});
$.each(itemData.sub, function () {
subList.append(subMenuItem(this));
});
item.append(subList);
}
return item;
};
var $menu = $("#Menu");
$.each(data.menu, function () {
$menu.append(
getMenuItem(this)
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Menu"></ul>
下面是我需要的输出。
<li class="has-children" id="ID">
<a id="ID-links" href="links">Women Clothing</a>
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back"><a>Back</a></li>
<li class="has-icon"><a class="submenu">submenu 1</a></li>
<li class="has-icon"><a class="submenu">submenu 2</a></li>
<li class="has-icon"><a class="submenu">submenu 3</a></li>
<li class="has-icon"><a class="submenu">submenu 4</a></li>
<li class="has-icon"><a class="submenu">submenu 5</a></li>
</ul>
</li>
<li class="has-children" id="ID">
<a id="ID-links" href="links">Men Clothing</a>
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back"><a>Back</a></li>
<li class="has-icon"><a class="submenu">submenu 1</a></li>
<li class="has-icon"><a class="submenu">submenu 2</a></li>
<li class="has-icon"><a class="submenu">submenu 3</a></li>
<li class="has-icon"><a class="submenu">submenu 4</a></li>
<li class="has-icon"><a class="submenu">submenu 5</a></li>
</ul>
</li>
解决方案
您没有$.each
按预期使用功能。您正在传递您this
的args
功能。this
将undefined
在函数中getMenuItem
在您的 $.each 函数中,您需要将 args 作为索引和数据。Index
返回每个人的数量&是你需要传递给你的函数key
的数量。JSON
data
同样在你的你只cd-secondary-dropdown
需要添加一次,而不是在.ul
$.each
我已经修复了您的问题code
,并且在上面的输出中完全按照您的要求工作。
运行下面的代码片段以查看它的工作原理。
var data = {
menu: [{
name: 'Women Cloth',
link: '0',
sub: null
}, {
name: 'Men Cloth',
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
}]
}]
};
var getMenuItem = function(itemData) {
var item = $("<li>", {
class: 'has-children',
id: itemData.id
}).append(
$("<a>", {
href: itemData.link,
html: itemData.name,
id: itemData.id + '-links',
}));
if (itemData.sub) {
//Add UL once only
var subList = $("<ul>", {
class: 'secondary-dropdown',
});
//Append go back
var goBack = $("<li>", {}).append(
$("<a>", {
href: '',
html: 'Go back',
class: 'go-back',
}));
//Append go back
subList.append(goBack);
$.each(itemData.sub, function(index, data) {
//Sub menu
var subMenuItem = $("<li>", {
class: 'has-icon'
}).append(
$("<a>", {
href: data.link,
html: data.name,
class: 'submenu-title',
}));
subList.append(subMenuItem);
});
item.append(subList);
}
return item;
};
var $menu = $("#Menu");
$.each(data.menu, function(index, data) {
$menu.append(getMenuItem(data));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Menu"></ul>
推荐阅读
- cloudkit - CloudKit 字节到字符串数组
- list - 如何在我的 SwiftUI 列表中通过按钮或点击手势选择项目并将其转移到另一个视图
- c++ - 在 g++ 中编译 C 文件和 C++ 文件
- flutter - Flutter - 在 Listview 中嵌套 ListView.builder
- android - 编辑文本获得焦点时从编辑文本中删除文本
- php - 无法在 PHP 中捕获 BadMethodCallException
- datatables - Jquery DataTables 虚拟水平滚动
- azure-active-directory - 为身份提供者指定的元数据不包含 IDPSSODescriptor
- gnome-shell - GJS gnome-shell 异常错误,如何克服这个错误
- assembly - 我认为这个数据总线测试不起作用。任何人解释它为什么有效?