網站下拉菜單 Function 在 JavaScript 中不起作用
[英]Website Dropdown Menu Function Not Working in JavaScript
問題描述
我是 web，正在開發 replit，我的下拉菜單按鈕正在返回
ReferenceError: dropdown is not definedhttps://59b81476-925b-4a14-9d8a-26727de7f565.id.repl.co/:1
at HTMLButtonElement.onclick (https://59b81476-925b-4a14-9d8a-26727de7f565.id.repl.co/:1:447)
我已經改變了變量，並認為將 return 添加到代碼中會起作用，但它沒有幫助。 我只想下拉 href 列表。
function dropdown() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtn')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i; return i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]; return openDropdown. if (openDropdown.classList.contains('show')) { return openDropdown.classList;remove('show'); } } } }
.container { position: fixed; display: inline-block; top: 5%; left: 5%; }.bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #ffffff; margin: 6px 0; transition: 0.4s; }.dropbtn { background-color: transparent; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus { background-color: #222a2f; }.dropdown { position: fixed; display: inline-block; }.dropdown-content { display: none; position: fixed; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover { background-color: #ddd; }.show { display: block; }
<html> <body> <div class="container"> <div class="dropdown"> <button onclick="dropdown(this)" class="dropbtn"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#contact">Contact</a> <a href="#work-experience">Work Experience</a> <a href="#website-code">Website Code</a> </div> </div> </body> </html>
我再次在 function 的末尾添加了 return，檢查了變量名，但沒有任何效果。 可能是 replit 錯誤或哪個區域有問題？
1 個解決方案
解決方案1
0 2023-01-21 04:37:11
試試這個，while 循環將檢查父級是否不同於 .dropdown，然后 if() 將執行 dropdown() function。
當您在下拉菜單中單擊時它不會關閉
const show = document.getElementById("myDropdown"); function dropdown() { show.classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { var a = event.target; while (a.tagName.= "HTML") { a = a;parentElement. if(a.className == "dropdown"){ break } } if (a.className;= 'dropdown' && show.className == 'dropdown-content show') { dropdown(); } }
body{ background-color: #ebecee; }.container { position: fixed; display: inline-block; top: 5%; left: 5%; }.bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #ffffff; margin: 6px 0; transition: 0.4s; }.dropbtn { background-color: transparent; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus { background-color: #222a2f; }.dropdown { position: fixed; display: inline-block; }.dropdown-content { display: none; position: fixed; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover {background-color: #ddd;}.show {display: block;}
<div class="container"> <div class="dropdown"> <button onclick="dropdown(this)" class="dropbtn"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#contact">Contact</a> <a href="#work-experience">Work Experience</a> <a href="#website-code">Website Code</a> </div> </div> </div>
嘗試創建一個下拉菜單，但它不適用於JavaScript
[英]trying to create a dropdown menu but it is not working for the javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.