下拉菜單不會出現在導航欄中

Question

單擊后我的下拉菜單出現問題，它不會以我想要的方式出現，它應該只是一個帶有“關於”選項卡的簡單下拉菜單，就像 w3schools 中的那樣。

這是代碼：

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

 /*dropdown lang start*/.dropbtnlang { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtnlang:hover, .dropbtnlang:focus { background-color: #2980B9; }.dropdownlang { position: relative; display: inline-block; }.dropdownlang-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdownlang-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdownlang a:hover { background-color: #ddd; }.showlang { display: block; } /*dropdown lang end*/

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <a href="#"><i class="fa fa-fw fa-language" onclick="myFunctionlang()" class="dropbtnlang"></i></a> <div id="myDropdown" class="dropdownlang-content"> <a href="#about">Test</a> </div>

Answer 1

你的問題在這里<i class="fa fa-fw fa-language" onclick="myFunctionlang()" class="dropbtnlang"></i>你已經設置class屬性兩次，我剛剛修復了這個小問題你的代碼和一切似乎都很好。

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

 /*dropdown lang start*/.dropbtnlang { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtnlang:hover, .dropbtnlang:focus { background-color: #2980B9; }.dropdownlang { position: relative; display: inline-block; }.dropdownlang-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdownlang-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdownlang a:hover { background-color: #ddd; }.showlang { display: block; } /*dropdown lang end*/

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <a href="#"><i class="fa fa-fw fa-language dropbtnlang" onclick="myFunctionlang()" ></i></a> <div id="myDropdown" class="dropdownlang-content"> <a href="#about">Test</a> </div>