javascript - 下拉菜单点击关闭

Question

我正在使用在网络上找到的代码创建下拉菜单。

问题是，当我点击一个打开的菜单，然后点击下一个菜单时，第一个菜单仍然打开...

我设法让下拉菜单、链接、大小和颜色方面的一切都很好......

...但是当我点击另一个下拉菜单时它不会关闭。

我们将不胜感激!

function myFunction() {
  document.getElementById("myDropdown1").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {
    var dropdowns = document.getElementsByClassName("dropdown1-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function FunctionFluids() {
  document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

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

function FunctionAdditives() {
  document.getElementById("myDropdown3").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

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

function FunctionCleaners() {
  document.getElementById("myDropdown4").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

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

function FunctionWinter() {
  document.getElementById("myDropdown5").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

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

function FunctionLubricants() {
  document.getElementById("myDropdown6").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

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

function FunctionOther() {
  document.getElementById("myDropdown7").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {

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

function FunctionNone() {
  document.getElementById("myDropdown7").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {
    var dropdowns = document.getElementsByClassName("dropdown6-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn1 {
  background-color: transparent;
  color: white;
  padding: 7px 10px 7px 10px;
  font-size: 13px;
  font-weight: bold;
  font-family: "Arial Narrow", Arial, sans-serif;
  border: none;
  cursor: pointer;
}

.dropbtn1:hover,
.dropbtn1:focus {
  background-color: #383838;
}

.dropdown1 {
  position: relative;
  display: inline-block;
}

.dropdown1-content {
  display: none;
  position: absolute;
  background-color: #eff0f2;
  font-size: 13px;
  font-weight: bold;
  line-height: 2.2;
  width: 200px;
  padding: 23px 10px 10px 10px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: -501;
  border-bottom: 3px solid red;
}

.dropdown1-content a {
  color: black;
  text-align: left;
  font-size: 12px;
  padding: 6px 6px 6px 6px;
  text-decoration: none;
}

.dropdown1-content a:hover {
  background-color: #ddd
}

.show {
  display: block;
}

<div style="background-color:black">
  <div class="dropdown1">
    <button onclick="myFunction()" class="dropbtn1">REFRIGERANTS</button>
    <div id="myDropdown1" class="dropdown1-content" style="text-align:left;">
      <a href="#">Refrigerants</a><br>
      <a href="#">Lubricants</a><br>
      <a href="#">Treatments</a><br>
      <a href="#">R-134A Products</a><br>
    </div>
  </div>

  <div class="dropdown1">
    <button onclick="FunctionFluids()" class="dropbtn1">FLUIDS</button>
    <div id="myDropdown2" class="dropdown1-content" style="text-align:left">
      <a href="#">Brake Fluid</a><br>
      <a href="#">Automatic Transmission Fluid</a><br>
      <a href="#">Power Steering Fluid</a><br>
    </div>
  </div>

  <div class="dropdown1">
    <button onclick="FunctionAdditives()" class="dropbtn1">ADDITIVES</button>
    <div id="myDropdown3" class="dropdown1-content" style="text-align:left">
      <a href="#">Fuel Additives</a><br>
      <a href="#">Oil Additives</a>
    </div>
  </div>

  <div class="dropdown1">
    <button onclick="FunctionCleaners()" class="dropbtn1">CLEANERS</button>
    <div id="myDropdown4" class="dropdown1-content" style="text-align:left">
      <a href="#">Brake Parts Cleaner</a><br>
      <a href="#">Carb & Air Intake Cleaners</a><br>
      <a href="#">General Cleaners</a><br>
      <a href="#">Battery Cleaners</a><br>
    </div>
  </div>

  </font>
  </td>
  <td></td>
  <td align="left" width="38%">
    <font color="#ffffff">

      <div class="dropdown1">
        <button onclick="FunctionWinter()" class="dropbtn1">WINTER DRIVING</button>
        <div id="myDropdown5" class="dropdown1-content" text-align="left">
          <a href="#">Link 1</a><br>
          <a href="#">Link 2</a><br>
          <a href="#">Link 3</a><br>
        </div>
      </div>

      <div class="dropdown1">
        <button onclick="FunctionLubricants()" class="dropbtn1">LUBIRICANTS</button>
        <div id="myDropdown6" class="dropdown1-content" text-align="left">
          <a href="#">Link 1</a><br>
          <a href="#">Link 2</a><br>
          <a href="#">Link 3</a><br>
        </div>
      </div>

      <div class="dropdown1">
        <button onclick="FunctionOther()" class="dropbtn1">OTHER PRODUCTS</button>
        <div id="myDropdown7" class="dropdown1-content" text-align="left">
          <a href="#">Link 1</a><br>
          <a href="#">Link 2</a><br>
          <a href="#">Link 3</a><br>
        </div>
      </div>
</div>

Answer 1

这是一种不需要 ID 的技术，也不需要 4 个功能都做同样的事情。它使用类来分配处理程序并根据单击的按钮查找元素。

// set up the event handlers
var buttons = document.querySelectorAll("button.dropbtn");
for (var i=0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", showDiv);
}

// set up the mouseout handlers
var contentDivs = document.querySelectorAll(".dropdown-content");
for (var i=0; i < contentDivs.length; i++) {
  contentDivs[i].addEventListener("mouseleave", hideDiv);
}


function showDiv(e) {
  // remove "show" class from previously shown menu, if it exists.  
  var prev = document.querySelector(".dropdown-content.show");
  if (prev) prev.classList.remove("show");
  
  // add "show" class to new clicked menu, unless the clicked menu was already open in which case close it
  var dropdownContent = this.parentNode.querySelector(".dropdown-content");
  if (dropdownContent == prev) return;
  dropdownContent.classList.add("show");
}

function hideDiv() {
  this.classList.remove("show");
}

.dropbtn{
    background-color: transparent;
    color: white;
    padding: 7px 10px 7px 10px;
    font-size: 13px;
    font-weight:bold;
    font-family: "Arial Narrow", Arial, sans-serif;
    border: none;
    cursor: pointer;
}

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

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

.dropdown-content{
    display: none;
    position: absolute;
    background-color: #eff0f2;
    font-size: 13px;
    font-weight:bold;
    line-height:2.2;
    width: 200px;
    padding: 23px 10px 10px 10px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: -501;
    border-bottom: 3px solid red;
}

.dropdown-content a{
    color: black;
    text-align: left;
    font-size: 12px;
    padding: 6px 6px 6px 6px;
    text-decoration: none;
}


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

.show {display:block;}

<div style="background-color:black">
<div class="dropdown">
  <button class="dropbtn">REFRIGERANTS</button>
  <div class="dropdown-content" style="text-align:left;">
    <a href="#">Refrigerants</a><br>
    <a href="#">Lubricants</a><br>
    <a href="#">Treatments</a><br>
    <a href="#">R-134A Products</a><br>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">FLUIDS</button>
  <div class="dropdown-content" style="text-align:left">
    <a href="#">Brake Fluid</a><br>
    <a href="#">Automatic Transmission Fluid</a><br>
    <a href="#">Power Steering Fluid</a><br>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">ADDITIVES</button>
  <div class="dropdown-content" style="text-align:left">
    <a href="#">Fuel Additives</a><br>
    <a href="#">Oil Additives</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">CLEANERS</button>
  <div class="dropdown-content" style="text-align:left">
    <a href="#">Brake Parts Cleaner</a><br>
    <a href="#">Carb & Air Intake Cleaners</a><br>
    <a href="#">General Cleaners</a><br>
    <a href="#">Battery Cleaners</a><br>
  </div>
</div>

</font></td>
            <td></td>
            <td align="left" width="38%"><font color="#ffffff">
                
<div class="dropdown">
  <button class="dropbtn">WINTER DRIVING</button>
  <div class="dropdown-content" text-align="left">
    <a href="#">Link 1</a><br>
    <a href="#">Link 2</a><br>
    <a href="#">Link 3</a><br>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">LUBIRICANTS</button>
  <div class="dropdown-content" text-align="left">
    <a href="#">Link 1</a><br>
    <a href="#">Link 2</a><br>
    <a href="#">Link 3</a><br>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">OTHER PRODUCTS</button>
  <div class="dropdown-content" text-align="left">
    <a href="#">Link 1</a><br>
    <a href="#">Link 2</a><br>
    <a href="#">Link 3</a><br>
  </div>
</div>
</div>