如何在点击时做一个下拉菜单答案

【问题标题】：How to do a dropdown menu on click如何在点击时做一个下拉菜单
【发布时间】：2019-03-29 20:59:39
【问题描述】：

我正在做一个下拉菜单，当我点击下拉菜单时我希望它打开，我看了一个 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>

如果我点击下拉按钮，它不起作用

【问题讨论】：

自从我看到你我们使用相同的代码：w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown 看看这个，重新复制 CSS。
欢迎来到stackoverflow。 “它不起作用”太不具体，无法解决问题。请添加您自己解决的问题。而且，您可能想开始调试。你知道如何在浏览器中使用 JavaScript 控制台吗？谷歌搜索“如何打开 javascript 控制台”可能是一个开始 - 请使用您在此处看到的任何错误消息编辑您的问题。
您的 CSS 隐藏了下拉菜单。
我看了一个 w3schools 教程，为什么它不起作用？ 答案：我看了一个 w3schools 教程
@JenniferGoncalves 你能澄清你的评论吗？当然，当一个元素有多个类时，你可以使用.toggle()。 .toggle() 要求您指定要切换使用的类，并且将适当调整任何其他样式..

标签： javascript html css drop-down-menu onclick

【解决方案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 之外的所有浏览器都支持。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：