添加多個下拉按鈕 HTML CSS javascript

Question

我正在嘗試在每個下拉菜單中創建多個帶有文本的下拉菜單。 這里的問題是我只能創建 1 個下拉列表，如果嘗試創建另一個，則代碼不再起作用。 以下是 1 個下拉菜單的代碼。 關於如何在第一個下拉菜單下創建另一個下拉菜單有什么好的靈魂建議嗎？ 先謝謝了

<!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>

資料來源： W3Schools

Answer 1

您的 function 按 ID 定位下拉菜單。 當您制作下拉菜單的另一個副本時，您會遇到重復的 id 沖突。 刪除id； 你實際上不需要它。 它是為了簡化示例。 像這樣修改你的代碼：

 /* 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>

正如我之前所說，這個例子已經為初學者簡化了很多，以至於它有很多不必要的部分。 例如，您可以替換

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

經過

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

並且代碼應該仍然有效。

添加多個下拉按鈕 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