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

Posted 2023-03-06

【中文标题】动态创建菜单子项[关闭]

【英文标题】：Create a menu subitems dynamically [closed]

【发布时间】：2021-07-15 05:22:54

【问题描述】：

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

enter image description here

【参考方案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>

【讨论】：

只需将子菜单项作为数组传递。一切都按预期工作。如果元素是string 或number 会更好

如果你想导航然后标记它a标签并在JS中使用setAttribute动态添加href

创建一个codesandbox，这样我就能明白你到底需要什么...codesandbox.io

好的@DIRIYA，只要你有空就给我评论，这样我们就可以继续聊天并明确你到底需要什么。还是很模糊

好的，一一告诉我你需要什么