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