HTML\\CSS\\JavaScript：如何动态构建菜单？

Question

我正在使用 W3.CSS 动画下拉列表 ( https://www.w3schools.com/w3css/w3css_dropdowns.asp )。

但我无法弄清楚如何根据项目名称列表动态填充菜单项。

我想这里应该涉及一些 Javascript，所以我在这个论坛上尝试 🙂

 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <div class="w3-dropdown-click"> <button onclick="showMenu()" class="w3-button">Team1</button> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-animate-zoom"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> <script> async function getTeams() { try{ (async () => { const response = await fetch('http://localhost:8088/teams') var teamsArrObj = await response.json() console.log(teamsArrObj); return teamsArrObj; })() }catch{ console.log("error"); } } function showMenu() { var x = document.getElementById("Demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script>

谢谢！

Answer 1

假设您使用的是常规的 js 文本数组，您可以遍历该数组并将insertAdjacentHTML插入下拉列表中。

for (let text of /*insert array name here*/) {
document.getElementById('Demo').insertAdjacentHTML('beforeend', `<a href="#" class="w3-bar-item w3-button">${text}</a>`

这里我们使用现代的 for...of 循环，并执行 insertAdjacentHTML。 如果您不熟悉该功能，请查看 MDN 文档。 我们还使用 ES6 模板字符串进行插入。

Answer 2

因为 W3 Schools 在他们的演示中有很多错误，你已经链接到了，我重新创建了他们的例子（以正确的方式）并展示了 CSS 将如何完成（而不是依赖他们的预制 CSS，你不t 去看看）。

您会注意到菜单的实际隐藏/显示是使用一行 JavaScript 完成的，而不是 W3 Schools 使用的所有过时的字符串相关内容。

而且，您将看到如何从对象数据数组动态加载菜单项。

 <!DOCTYPE html> <html> <head> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> button { background-color:black; color:white; padding:5px; border:none; font-size:1.1em; /* 10% bigger than normal */ } #Demo { position:relative; box-shadow:0 0 20px #808080; padding:6px; margin-top:3px; height:auto; width:75px; transform-origin: center; /* Make effect work from center outward */ transition:all .5s; /* Make changes to all CSS happen over 1 second */ } /* The style of the menu when it's hidden */ #Demo.hidden { transform:scale(0,0); /* Scale it to 0 by 0 pixels */ } .menuItem { display:block; /* Each item on its own line */ text-decoration:none; /* no underline on the links */ padding:3px; font-family:Arial; } .menuItem:hover { background-color:#e0e0e0; } </style> </head> <body> <div> <h1>Animated Dropdown</h1> <div class="w3-dropdown-click"> <button>Click me</button> <div id="Demo" class="hidden"></div> </div> </div> <script> let items = [ { text: "Link 1", path: "https://example.com"}, { text: "Link 2", path: "https://hbo.com"}, { text: "Link 3", path: "https://cbs.com"}, ]; const demo = document.getElementById("Demo"); // Loop over the items array items.forEach(function(item){ // Create a new anchor element and configure it: let link = document.createElement("a"); link.classList.add("menuItem"); link.href = item.path; link.textContent = item.text; // Append the new link to the menu demo.appendChild(link); }); document.querySelector("button").addEventListener("click", function(){ demo.classList.toggle("hidden"); // Toggle the display of the menu }); </script> </body> </html>

HTML\\CSS\\JavaScript：如何动态构建菜单？

问题描述

2 个解决方案

解决方案1
1 2020-10-27 17:06:34

解决方案2
-1 已采纳 2020-10-27 19:37:56

HTML\\CSS\\JavaScript：如何动态构建菜单？

问题描述

2 个解决方案

解决方案1 1 2020-10-27 17:06:34

解决方案2 -1 已采纳 2020-10-27 19:37:56

解决方案1
1 2020-10-27 17:06:34

解决方案2
-1 已采纳 2020-10-27 19:37:56