时间戳

首页 > 解决方案 > 创建单独的下拉菜单

html - 创建单独的下拉菜单

问题描述

我创建了一个下拉菜单，要求您单击文本以在下方显示更多文本。代码是：

.dropbtn {
  cursor: pointer;
  font-weight: bold;
}

.dropdown03 {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 100%;
}

.dropdown-content03 {
  display: none;
  position: relative;
  width: 100%;
  overflow: auto;
  z-index: 1;
}

.show {display: block;} 

 <script>
  /* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content03");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script> 

<div class="dropdown03">
  <button onclick="myFunction()" class="dropbtn">Dropdown Button Text</button>
  <div id="myDropdown" class="dropdown-content03">
  Dropdown Button Text
    </div>
</div>

这段代码在我的网站上运行得很好，当你点击“下拉按钮文本”然后点击它下面的“下拉按钮文本”时。这是我的麻烦；当我使用相同的代码添加另一个下拉列表时，网站上的第一个下拉列表将显示，但按钮上方的下拉列表不显示。换句话说，当我添加多个下拉列表时，所有新下拉列表都不起作用，它们最终只会显示第一个下拉列表内容。（希望这是有道理的）

单击时，我怎样才能拥有多个将加载自己的内容的下拉列表？我必须为每个标签创建一个全新的标签吗？

标签： htmlcssdropdowndisplaytagdropdownbox

解决方案

更改id和类的名称会有所帮助。尝试这样做。还可以通过单击检查按钮检查控制台。从检查选项卡中查看您的 HTML。确保控制台中没有错误。

确保在重新加载浏览器时，按 Ctrl+F5 进行硬刷新。

推荐阅读