添加多个下拉按钮 HTML CSS javascript

Question

i am trying to create multiple dropdowns with text inside each of them.我正在尝试在每个下拉菜单中创建多个带有文本的下拉菜单。 The problem here is i am only able to create 1 dropdown and if try to create another the code does not work anymore.这里的问题是我只能创建 1 个下拉列表，如果尝试创建另一个，则代码不再起作用。 the following is the code for 1 dropdown.以下是 1 个下拉菜单的代码。 Can any kind soul advice on how to create another dropdown under the first dropdown?关于如何在第一个下拉菜单下创建另一个下拉菜单有什么好的灵魂建议吗？ thanks in advance:D先谢谢了

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;

}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 50%;
}

.dropdown-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;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  </div>
</div>

<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-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

Source: W3Schools资料来源： W3Schools

Answer 1

Your function targets the dropdown menu by ID.您的 function 按 ID 定位下拉菜单。 When you make another copy of your dropdown menu, you run into a duplicate id conflict.当您制作下拉菜单的另一个副本时，您会遇到重复的 id 冲突。 Remove the id;删除id； you actually don't need it.你实际上不需要它。 It is there to simplify the example.它是为了简化示例。 Modify your code like this:像这样修改你的代码：

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction(e) { e.parentElement.querySelector(".dropdown-content").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-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }

 .dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; }.dropdown { position: relative; display: inline-block; width: 50%; }.dropdown-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; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }.dropdown a:hover { background-color: #ddd; }.show { display: block; }

 <h2>Clickable Dropdown</h2> <p>Click on the button to open the dropdown menu.</p> <div class="dropdown"> <button onclick="myFunction(this)" class="dropbtn">Dropdown</button> <div class="dropdown-content"> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div> </div> <div class="dropdown"> <button onclick="myFunction(this)" class="dropbtn">Dropdown</button> <div class="dropdown-content"> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div> </div>

As I stated earlier, this example has been simplified a lot for beginners, to the extent that it has so many unnecessary parts.正如我之前所说，这个例子已经为初学者简化了很多，以至于它有很多不必要的部分。 For example, you can replace例如，您可以替换

var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
  }
}

by经过

for (var i = 0; i < dropdowns.length; i++) {
  dropdowns[i].classList.remove(show);
}

and the code should still work.并且代码应该仍然有效。

添加多个下拉按钮 HTML CSS javascript

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-06 13:12:04

添加多个下拉按钮 HTML CSS javascript

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-06 13:12:04

解决方案1
1 已采纳 2020-06-06 13:12:04