单击不同的下拉菜单时关闭下拉菜单

Question

我编写了这个 HTML 来创建 2 个下拉菜单：

window.onclick = function(event) {
  var targ = event.target;
  var drp = document.getElementsByClassName("dropdown-content");
  for (var i = 0; i < drp.length; i++) {
    if (drp[i].previousElementSibling == targ) {
      targ.nextElemntSibling.classList.toggle("active");
      targ.nextElemntSibling.classList.toggle("show");
    } else {
      drp[i].classList.remove('show');
      drp[i].previousElementSibling.classList.remove('active')
    }
  }
}

.searchGrid {
  display: flex;
  grid-template-columns: repeat(4, 25%);
  gap: 30px;
  place-items: center;
}


/* CHOOSE CITY*/

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

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  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-content a:hover {
  background-color: #ddd
}

.show {
  display: block;
}


/* CHOOSE YEAR*/

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

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  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-content a:hover {
  background-color: #ddd
}

.show {
  display: block;
}

<div class="searchGrid">
  <div class="chooseCity">
    <button onclick="CityFunc()" class="dropbtn">Choose city</button>
    <div id="cityDropdown" class="dropdown-content">
      <a href="#">Los Angeles</a>
      <a href="#">New York</a>
      <a href="#">Toronto</a>
      <a href="#">Las Vegas</a>
    </div>
  </div>
  <div class="chooseyear">
    <button onclick="yearFunc()" class="dropbtn">Choose year</button>
    <div id="yearDropdown" class="dropdown-content">
      <a href="#">1960</a>
      <a href="#">1970</a>
      <a href="#">1980</a>
    </div>
  </div>
</div>

我发现当我点击网站中的不同位置时应该关闭下拉菜单的 JavaScript 函数

但是，当我点击"Choose city" 按钮时，它会打开下拉菜单，当我点击"Choose year" 按钮时，它将关闭"Choose city" 下拉菜单并打开新的下拉菜单，就像它应该的那样。

由于某种原因，当我单击"Choose year" 按钮然后单击"Choose city" 时，它会打开"Choose city" 下拉菜单但不会关闭"Choose year"

我在这里错过了什么？

Answer 1

你有一个错误targ.nextElemntSibling 它返回undefined。还 未声明函数CityFunc() yearFunc()。请参阅here中的正确示例

window.onclick = function (event) {
  var targ = event.target;
  var drp = document.getElementsByClassName("dropdown-content");
  for (var i = 0; i < drp.length; i++) {
    if (drp[i].previousElementSibling === targ) {
      drp[i].classList.toggle("show");
      drp[i].previousElementSibling.classList.toggle("active");
    } else {
      drp[i].classList.remove("show");
      drp[i].previousElementSibling.classList.remove("active");
    }
  }
};