动态创建菜单子项[关闭]

Question

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

enter image description here

Answer 1

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

我在没有引导程序的情况下创建了这个，以了解引擎盖下的内容。根据引导程序和个人喜好将类添加到 sub-menu-items。

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

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>