點擊如何做一個下拉菜單

Question

我正在做一個下拉菜單，當我單擊drop-btn時我想打開它，我看了w3schools教程，為什么它不起作用？

我復制了所有教程，但我不知道為什么它不起作用

HTML（僅更改了下拉ID和函數名稱）

CSS（我僅更改了大小和顏色）

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { 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'); } } } } 

 .dropdown { float: right; margin-right: 115px; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: #ff0000; font-family: inherit; margin: 0; } .dropbtn:hover { cursor: pointer; } .dropdown:hover { background-color: #ff7b7b; text-decoration: none; } .dropdown-content { display: none; position: absolute; background-color: #ff0000 !important; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; opacity: 0; -webkit-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; transition: opacity .3 ease-in; } .dropdown-content a { float: none; color: black; padding: 14px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ff7b7b; } .show { display: block; z-index: 11; } 

 <div class="dropdown"> <button class="dropbtn" onclick="myFunction()"><li class="fa fa-bars fa-2x"></li></button> <div class="dropdown-content" id="myDropdown"> <a href="signup.php" style="color: white;">Signup</a> <a href="#" style="color: white;">Info</a> <a href="#" style="color: white;">Last news</a> </div> </div> 

如果我單擊dropdown-btn則不起作用

Answer 1

考慮細節/匯總解決方案。 更少的代碼，並且已經內置了下拉功能：

<details><summary>Items</summary>
<div onclick="">Item 1</div>
<div onclick="">Item 2</div>
<div onclick="">Item 3</div>
<div onclick="">Item 4</div>
</details>

注意：除Edge之外，所有瀏覽器均支持。

Answer 2

我只需很少更改即可更新您的代碼，請嘗試這樣做，希望對您有所幫助。 謝謝

 function myFunction() { $('#myDropdown').toggleClass('show'); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { 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'); } } } } 

 .dropdown { float: right; margin-right: 115px; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: #ff0000; font-family: inherit; margin: 0; } .dropbtn:hover { cursor: pointer; } .dropdown:hover { background-color: #ff7b7b; text-decoration: none; } .dropdown-content { display: none; position: absolute; background-color: #ff0000 !important; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; opacity: 0; -webkit-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; transition: opacity .3 ease-in; } .dropdown-content a { float: none; color: black; padding: 14px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ff7b7b; } .show { display: block; opacity: 1; z-index: 11; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()"><li class="fa fa-bars fa-2x"></li></button> <div class="dropdown-content" id="myDropdown"> <a href="signup.php" style="color: white;">Signup</a> <a href="#" style="color: white;">Info</a> <a href="#" style="color: white;">Last news</a> </div> </div> 

Answer 3

您的代碼很好，只需從此CSS刪除opacity:0 ：

 .dropdown-content {
  display: none;
  position: absolute;
  background-color: #ff0000 !important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  opacity: 0; //<----------------------------------delete this
  -webkit-transition: opacity .3s ease-in;
  -moz-transition: opacity .3s ease-in;
  -o-transition: opacity .3s ease-in;
  transition: opacity .3 ease-in;
}

您的項目正在顯示，但是您看不到它們，因為它的不透明度為零。 也不要在按鈕內使用<li> 。 它產生了意外的結果，我不知道為什么。

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { 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'); } } } } 

 .dropdown { float: right; margin-right: 115px; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: #ff0000; font-family: inherit; margin: 0; } .dropbtn:hover { cursor: pointer; } .dropdown:hover { background-color: #ff7b7b; text-decoration: none; } .dropdown-content { display: none; position: absolute; background-color: #ff0000 !important; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; -webkit-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; transition: opacity .3 ease-in; } .dropdown-content a { float: none; color: black; padding: 14px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ff7b7b; } .show { display: block; z-index: 11; } 

 <div class="dropdown"> <button class="dropbtn" onclick="myFunction()">Menu</button> <div class="dropdown-content" id="myDropdown"> <a href="signup.php" style="color: white;">Signup</a> <a href="#" style="color: white;">Info</a> <a href="#" style="color: white;">Last news</a> </div> </div>