动态创建菜单子项

Question

我在asp.net应用程序中使用CSS/Bootstrap设计了一个菜单，但子菜单需要根据用户角色创建运行时。需要一个类似的想法，在网站运行时使用参数创建子项。请帮助我了解如何实现这种情况。感谢任何人的帮助

在此处输入图像描述

Answer 1

您可以动态创建sub-menu。这是多种方式之一。

我创建了这个没有引导程序的应用程序，以便了解引擎盖下的内容。将类添加到sub-menu-itemsacc以引导和个人偏好。

塑造自己的风格。我已经完成了基本造型

const menuItem = document.querySelectorAll(".menu-item");
menuItem.forEach((mi) => {
mi.addEventListener("click", (e) => {
const nextSibling = e.target.nextElementSibling;
nextSibling.classList.toggle("hide");
});
});
function addSubMenuItem(menuItemId, smi) {
const menuItem = document.querySelector(`#${menuItemId}`);
const sibling = menuItem.nextElementSibling;
smi.forEach((subMenuItemName) => {
const li = document.createElement("li");
li.classList.add("sub-menu-item");
li.textContent = subMenuItemName;
sibling.append(li);
});
}
addSubMenuItem("home", ["a", "b", "c"]);
addSubMenuItem("blog", ["a"]);
addSubMenuItem("work", ["a", "b", "c", "d", 1, 24]);
addSubMenuItem("about", ["a", "b", "c", 0, 83, 93]);

.container {
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
background-color: red;
}
.menu-item-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.menu-item {
padding: 1rem;
cursor: pointer;
user-select: none;
}
ul.sub-menu {
display: inline-block;
list-style-type: none;
top: 100%;
background-color: royalblue;
position: absolute;
padding: 0;
margin: 0;
}
li.sub-menu-item {
padding: .25rem 1rem;
}
.hide {
display: none !important;
}

<div class="container">
<div class="menu-item-container">
<div class="menu-item" id="home">Home</div>
<ul class="sub-menu hide">
</ul>
</div>
<div class="menu-item-container">
<div class="menu-item" id="blog">Blog</div>
<ul class="sub-menu hide"></ul>
</div>
<div class="menu-item-container">
<div class="menu-item" id="work">Work</div>
<ul class="sub-menu hide"></ul>
</div>
<div class="menu-item-container">
<div class="menu-item" id="about">About</div>
<ul class="sub-menu hide"></ul>
</div>
</div>