我正在尝试使用 Bootstrap 和一些 JSON 数据创建一个多级下拉列表。
理想情况下，我希望下拉菜单具有这种嵌套功能:
我正在处理带有嵌套数据的对象数组，它看起来像:
[
{
ID: 1,
Title: "Middle Earth",
Locations: [
{
Category: "Lothlorien",
Child: [
{
PersonTitle: "Galadriel",
Link: "https://www.galadriel.lot"
},
{
PersonTitle: "Celeborn",
Link: "https://www.celeb.lot"
}
]
},
{
Category: "Mordor",
Child: [
{
PersonTitle: "Saruman",
Link: "https://www.srmn.org"
}
]
}
]
},
{
ID: 2,
Title: "Arrakis",
Locations: [...]
}
]
问题:
- 我可以使用模板文字创建子菜单功能，并从那里执行映射吗？ (见下面的代码)
- 或者我是否必须创建单独的
$.each或forEach下拉菜单每一层的 block ？例如，“为每个区域(中土世界、阿拉基斯等)创建 1 层下拉菜单。然后为该区域内的每个位置创建一个子菜单。然后为该位置内的每个 PersonTitle 创建...”等。
我以前处理过对象数组，但没有处理过这种复杂程度，也没有使用数据创建子菜单下拉列表。
这是一个代码示例:
console.log("regions", regionsData);
if (regionsData.length > 0) {
$.each(regionsData, (index, item) => {
const csContainer = $(".mo_cs-dropdown");
const dropdownGroup = `
<div class="submenu-item">
<a class="dropdown-item dropdown-toggle dropright" data-region="${item.Title}" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${item.Title}</a>
<div class="dropdown-menu">
<li class="dropdown dropend">
<ul class="dropdown-menu aria-labelledby="dropdownMenuLink">
<li class="dropdown dropend">
${Object.keys(
item.Locations.map(key => {
return `<a class='dropdown-item dropdown-toggle dropright' href='#' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>${item.Locations.Child}</a>`;
})
)}
<ul class="dropdown menu" aria-labelledby="">
<li><a class="dropdown-item" href="#">test item</a></li>
</ul>
</li>
</ul>
</li>
</div>
</div>`;
csContainer.append(dropdownGroup);
});
} else {
...
}
这是 console.log(regionsData) 的屏幕截图带编辑信息:/image/HQEXo.png
最佳答案
您需要循环遍历数组，并且在每次迭代时，您可以使用 += 将 html 附加到某个变量内。然后，将生成的 html 附加到 ul 标记内。
我从 this 获取了一些代码发布，因为我们需要控制每个子菜单单击，您可以使用 jquery 代码，以便每次单击都从其他 submenu 中添加/删除 show 类。
演示代码:
var regionsData = [{
ID: 1,
Title: "Middle Earth",
Locations: [{
Category: "Lothlorien",
Child: [{
PersonTitle: "Galadriel",
Link: "https://www.galadriel.lot"
},
{
PersonTitle: "Celeborn",
Link: "https://www.celeb.lot"
}
]
},
{
Category: "Mordor",
Child: [{
PersonTitle: "Saruman",
Link: "https://www.srmn.org"
}]
}
]
},
{
ID: 2,
Title: "Arrakis",
Locations: [{
Category: "Lothlorien1",
Child: [{
PersonTitle: "Galadriel1",
Link: "https://www.galadriel.lot"
},
{
PersonTitle: "Celeborn",
Link: "https://www.celeb.lot"
}
]
}]
}
]
var csContainer = $(".mo_cs-dropdown");
$.each(regionsData, (index, item) => {
//append li
var dropdownGroup = `<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" id="${index}_main" data-region="${item.Title}" href="#" >${item.Title}</a>
<ul class="dropdown-menu" aria-labelledby="${index}_main">`
//loop through loaction array
$.each(item.Locations, (index, items) => {
dropdownGroup += ` <li class="dropdown-submenu"><a class="dropdown-toggle dropdown-item" id="${index}_inner" href="#" >${items.Category}</a><ul class="dropdown-menu" aria-labelledby="${index}_inner">`
//loop through child array
$.each(items.Child, (index, items) => {
dropdownGroup += ` <li><a class="dropdown-item " href="${items.Link}" aria-labelledby="${index}_inner" href="#">${items.PersonTitle}</a></li>`
})
dropdownGroup += `</ul></li>` //closes tags
})
dropdownGroup += `</ul></li>`; //close tags..
csContainer.append(dropdownGroup);
});
//on click of `a` tag
$(document).on('click', '.dropdown-menu a.dropdown-toggle', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass('show'); //remove show classs from others
}
var $subMenu = $(this).next('.dropdown-menu');
$subMenu.toggleClass('show');
//on hidden...remove class as well
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass('show');
});
return false;//prevnt deafult..
});.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu mo_cs-dropdown" aria-labelledby="dropdownMenuLink">
</ul>
<li>
</ul>
</div>
</nav>关于javascript - 使用嵌套的对象数组创建多级下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67973278/