点击如何做一个下拉菜单

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>