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

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它returnundefined。还未声明函数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");
    }
  }
};

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

Close dropdown menu when clicked on different dropdown

html

javascript

dropdown