如何將導航欄鏈接變成帶有 HTML CSS 和 JavaScript 的下拉菜單？

Question

我正在嘗試將導航欄的前兩個鏈接變成下拉菜單。 我想讓它在您單擊它們時顯示下拉菜單，並且箭頭圖標從向下指向的箭頭變為向上指向的箭頭。

我曾嘗試使用 JavaScript 來執行 OnClick 事件，但沒有成功。

出於某種原因，我的兩個下拉菜單相互重疊，並且它們沒有位於正確的導航欄鏈接下。 一個應該出現在功能鏈接下，另一個應該出現在導航欄中的公司鏈接下。 我還想請求有關如何解決此問題的幫助。

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("dropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropdown-arrow')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }

 @import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Epilogue', 'sans-serif'; } .body-container { background-color: hsl(0, 0%, 98%); height: 100vh; width: 100vw; max-width: 100%; } .navbar { display: flex; align-items: center; } .navbar-flex li { margin-right: auto; display: inline-block; padding: 1em; } .navbar-flex a { color: hsl(0, 0%, 41%); text-decoration: none; } .navbar-flex a:hover { color: hsl(0, 0%, 8%); } .navbar li { list-style-type: none; } .navbar img { padding: 1.5em 1em 1em 2em; } .navbar-btn { margin-left: auto; padding: 1.5em; } .dropdown { position: relative; display: inline-block; } .dropdown-content { /*display: none;*/ position: absolute; min-height: 100px; box-shadow: 0px 8px 16px 0px hsla(0, 0%, 0%, 0.2); z-index: 1; } .dropdown-content a { color: hsl(0, 0%, 8%); padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover { background-color: hsl(0, 0%, 41%); } .dropdown-arrow { color: hsl(0, 0%, 41%); outline: none; background: none; border: none; cursor: pointer; } .dropdown-arrow:hover { color: hsl(0, 0%, 8%); } .dropdown-links { text-decoration: none; display: block; padding: 1em; color: hsl(0, 0%, 8%); } .dropdown-links:hover { background-color: hsl(0, 0%, 98%); } .show { display: block; } /* Styles for both buttons in the navbar */ .btn-primary { color: hsl(0, 0%, 41%); outline: none; padding: 0.5em; margin-left: 1em; cursor: pointer; } .btn-primary:hover { color: hsl(0, 0%, 8%); } /* Styles for login button in the navbar */ #login-btn { border: none; background: none; } /* Styles for register button in the navbar */ #register-btn { padding: 0.8em; border-radius: 10px; background: none; border-color: hsl(0, 0%, 41%); border-width: 1px; } .register-btn:hover { border-color: hsl(0, 0%, 8%); }

 <div class="body-container"> <nav class="navbar"> <a href="#"><img src="images/logo.svg" alt="company logo"></a> <ul class="navbar-flex"> <li><a href="#">Features </a> <!-- Features dropdown menu--> <div class="dropdown"> <button onclick="myFunction()" class="dropdown-arrow"> <svg class = "drop-image" svg width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg> </button> <ul class="dropdown-content"> <li><a class="dropdown-links" href="#">Todo List</a></li> <li><a class="dropdown-links" href="#">Calendars</a></li> <li><a class="dropdown-links" href="#">Reminders</a></li> <li><a class="dropdown-links" href="#">Planning</a></li> </ul> </div> </li> <li><a href="#">Company </a> <!-- Company dropdown menu--> <div class="dropdown"> <button onclick="myFunction()" class="dropdown-arrow"> <svg class = "drop-image" width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg> </button> <ul id="my-dropdown" class="dropdown-content"> <li><a class="dropdown-links" href="#">History</a></li> <li><a class="dropdown-links" href="#">Our Team</a></li> <li><a class="dropdown-links" href="#">Blog</a></li> </ul> </div> </li> <li><a href="#">Careers</a></li> <li><a href="#">About</a></li> </ul> <div class="navbar-btn"> <button class="btn-primary" id="login-btn">Login</button> <button class="btn-primary" id="register-btn">Register</button> </div> </nav> </div> </div> </div>

Answer 1

我給你寫了一個可能的 Vanilla JS 方法來處理你正在尋找的行為：

1. 首先選擇列表中的所有li元素；
2. 添加click事件監聽器；
3. 每次單擊時，它都會根據我附加到 DOM 節點的屬性isOpen添加或刪除顯示模態和旋轉箭頭的類，因此您始終可以知道某個元素是在視覺上打開還是關閉。 如果您打算在打開一個新的下拉菜單時關閉其他打開的下拉菜單以防止重疊，這將非常有用。

 const links = document.querySelectorAll(".navbar-flex>li") links.forEach((el, i) => { el.isOpen = false; el.onclick = e => { const dropdown = el.querySelector(".dropdown") const arrow = el.querySelector(".dropdown-arrow") el.isOpen ? close(dropdown, arrow) : open(dropdown, arrow) el.isOpen = !el.isOpen //Close other open dropdowns links.forEach((el, j) => { const dropdown = el.querySelector(".dropdown") const arrow = el.querySelector(".dropdown-arrow") if (i !== j) { if (el.isOpen) { close(dropdown, arrow) el.isOpen = false } } }) } }) function open(el, arrow) { el.classList.add("show") arrow.classList.add("rotate") } function close(el, arrow) { el.classList.remove("show") arrow.classList.remove("rotate") }

 @import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap'); * { padding: 0; margin: 0; box-sizing: border-box; font-family: 'Epilogue', 'sans-serif'; } .body-container { background-color: hsl(0, 0%, 98%); height: 100vh; width: 100vw; max-width: 100%; } .navbar { display: flex; align-items: center; } .navbar-flex li { margin-right: auto; display: inline-block; padding: 1em; } .navbar-flex a { color: hsl(0, 0%, 41%); text-decoration: none; } .navbar-flex a:hover { color: hsl(0, 0%, 8%); } .navbar li { list-style-type: none; } .navbar img { padding: 1.5em 1em 1em 2em; } .navbar-btn { margin-left: auto; padding: 1.5em; } .dropdown { position: absolute; display: none; background: #FFF; } .dropdown-content { min-height: 100px; box-shadow: 0px 8px 16px 0px hsla(0, 0%, 0%, 0.2); z-index: 1; display: flex; flex-direction: column; } .dropdown-content a { color: hsl(0, 0%, 8%); padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover { background-color: hsl(0, 0%, 41%); } .dropdown-arrow { color: hsl(0, 0%, 41%); outline: none; background: none; border: none; cursor: pointer; transition: all 0.2s ease-out; } .dropdown-arrow:hover { color: hsl(0, 0%, 8%); } .dropdown-links { text-decoration: none; display: block; padding: 1em; color: hsl(0, 0%, 8%); } .dropdown-links:hover { background-color: hsl(0, 0%, 98%); } .show { display: block !important; } .rotate { transform: rotate(180deg); } /* Styles for both buttons in the navbar */ .btn-primary { color: hsl(0, 0%, 41%); outline: none; padding: 0.5em; margin-left: 1em; cursor: pointer; } .btn-primary:hover { color: hsl(0, 0%, 8%); } /* Styles for login button in the navbar */ #login-btn { border: none; background: none; } /* Styles for register button in the navbar */ #register-btn { padding: 0.8em; border-radius: 10px; background: none; border-color: hsl(0, 0%, 41%); border-width: 1px; } .register-btn:hover { border-color: hsl(0, 0%, 8%); }

 <div class="body-container"> <nav class="navbar"> <a href="#"><img src="images/logo.svg" alt="company logo"></a> <ul class="navbar-flex"> <li> <a href="#">Features </a> <button class="dropdown-arrow"> <svg class = "drop-image" svg width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg> </button> <!-- Features dropdown menu--> <div class="dropdown"> <ul class="dropdown-content"> <li><a class="dropdown-links" href="#">Todo List</a></li> <li><a class="dropdown-links" href="#">Calendars</a></li> <li><a class="dropdown-links" href="#">Reminders</a></li> <li><a class="dropdown-links" href="#">Planning</a></li> </ul> </div> </li> <li> <a href="#">Company </a> <button class="dropdown-arrow"> <svg class = "drop-image" width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg> </button> <!-- Company dropdown menu--> <div class="dropdown"> <ul id="my-dropdown" class="dropdown-content"> <li><a class="dropdown-links" href="#">History</a></li> <li><a class="dropdown-links" href="#">Our Team</a></li> <li><a class="dropdown-links" href="#">Blog</a></li> </ul> </div> </li> <li><a href="#">Careers</a></li> <li><a href="#">About</a></li> </ul> <div class="navbar-btn"> <button class="btn-primary" id="login-btn">Login</button> <button class="btn-primary" id="register-btn">Register</button> </div> </nav> </div> </div> </div>