当另一个下拉菜单打开时隐藏一个下拉菜单

Question

我是 Javascript 的新手，所以真的需要你们的帮助，伙计们。

我有一个垂直子菜单，我想在打开另一个下拉项时隐藏一个下拉项。我一直在浏览今天的感觉，我想我必须以某种方式使用“切换”方法，甚至可能是一个 onclick 功能，但到目前为止，我无法弄清楚如何，主要是，如何使它与已经存在的 Javascript 代码一起工作。答案一定很简单，但是……如果你能帮助我，那就太好了。

我的代码：

HTML（只是删除了几行<a></a> 以节省一些空间）：

<div class="sidenav">
  <button class="dropdown-btn">Cloud & Datacenter Infrastruktur 
    <i class="fa fa-caret-down fa-border"></i>
  </button>
  <div class="dropdown-container">
  <div class="subpoints">
    <a href="#company">AWS Infrastruktur</a>
    <a href="#team">MS Azure</a>
    <a href="#careers">Google Cloud</a>
</div>
  </div>
  <button class="dropdown-btn">BI / Analytics 
    <i class="fa fa-caret-down fa-border"></i>
  </button>
  <div class="dropdown-container">
    <div class="subpoints">
    <a href="#company">BI & Datawarehouse</a>
    <a href="#team">Operational Analytics</a>
    <a href="#careers">Data Science</a>
    </div>
  </div>
  <button class="dropdown-btn">IT Security 
    <i class="fa fa-caret-down fa-border"></i>
  </button>
  <div class="dropdown-container">
    <div class="subpoints">
    <a href="#bring">IT-Security Architektur / IT Security Compliance</a>
    <a href="#deliver">IT-Security Analyse + Pentesting</a>
    <a href="#package">IT-Security Operations</a>
    </div>
  </div>
</div>

CSS（如果相关）：

/* Sidenav, full height */
.sidenav {
  height: 100%;
  width: 100%;
  z-index: 1;
  top: 15em;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #fff;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-family:Roboto;
  font-weight:300;
  line-height:1.5em;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #fff;
  text-decoration: underline #fcaf17;
  text-underline-offset: 0.3em;
}

/* Add an active class to the active dropdown button */
.active {
  color: white;
  text-decoration: underline #fcaf17;
  text-underline-offset: 0.3em;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  color:#717375;
}
.subpoints {
  padding-left: 2.8em;
}

.dropdown-container a {
  background-color: #fff;
  color:#717375;
  padding-left: 3em;
}

.dropdown-container a:hover {
  color:#717375;
  background-color:#fcaf17;
  display: block;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: left;
  padding-right: 0.8em;
}

.fa-border {
  border-style:none;
}

这是我已经使用的一段 Javascript，用于在打开下拉菜单时将所有较低的元素向下移动（由 W3Schools 提供）。

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}

现在我需要一段额外的 Javascript 以在打开下一个下拉菜单时关闭上一个下拉菜单...这是在网站上实现的方法，就在标题区域：Link

非常感谢您提前提供的任何帮助！

Answer 1

在将display:block 添加到单击的元素之前，您可以遍历所有下拉容器并使用display:none 设置样式：

var dropdown = document.getElementsByClassName("dropdown-btn");
//grab all the dropdowncontainers to apply display none to
var dropdowncontainers = document.getElementsByClassName('dropdown-container');
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  //remove active class when clicked on active element
  this.classList.remove("active");
  } else {
  //loop through all containers
  for (var i = 0; i < dropdowncontainers.length; i++) {
    //add the style.display to all elements
    dropdowncontainers[i].style.display = 'none';
  }
  //loop through all buttons
  for (i = 0; i < dropdown.length; i++) {
  //remove class active from all buttons
    dropdown[i].classList.remove("active");
  }
  //add class active to clicked button
  this.classList.add("active");
  //add display block to the right dropdown container
  dropdownContent.style.display = "block";
  }
  });
}

/* Sidenav, full height */
.sidenav {
  height: 100%;
  width: 100%;
  z-index: 1;
  top: 15em;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #fff;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-family:Roboto;
  font-weight:300;
  line-height:1.5em;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #fff;
  text-decoration: underline #fcaf17;
  text-underline-offset: 0.3em;
}

/* Add an active class to the active dropdown button */
.active {
  color: white;
  text-decoration: underline #fcaf17;
  text-underline-offset: 0.3em;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  color:#717375;
}
.subpoints {
  padding-left: 2.8em;
}

.dropdown-container a {
  background-color: #fff;
  color:#717375;
  padding-left: 3em;
}

.dropdown-container a:hover {
  color:#717375;
  background-color:#fcaf17;
  display: block;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: left;
  padding-right: 0.8em;
}

.fa-border {
  border-style:none;
}

<div class="sidenav">
  <button class="dropdown-btn">Cloud & Datacenter Infrastruktur 
    <i class="fa fa-caret-down fa-border"></i>
  </button>
  <div class="dropdown-container">
  <div class="subpoints">
    <a href="#company">AWS Infrastruktur</a>
    <a href="#team">MS Azure</a>
    <a href="#careers">Google Cloud</a>
</div>
  </div>
  <button class="dropdown-btn">BI / Analytics 
    <i class="fa fa-caret-down fa-border"></i>
  </button>
  <div class="dropdown-container">
    <div class="subpoints">
    <a href="#company">BI & Datawarehouse</a>
    <a href="#team">Operational Analytics</a>
    <a href="#careers">Data Science</a>
    </div>
  </div>
  <button class="dropdown-btn">IT Security 
    <i class="fa fa-caret-down fa-border"></i>
  </button>
  <div class="dropdown-container">
    <div class="subpoints">
    <a href="#bring">IT-Security Architektur / IT Security Compliance</a>
    <a href="#deliver">IT-Security Analyse + Pentesting</a>
    <a href="#package">IT-Security Operations</a>
    </div>
  </div>
</div>

编辑：添加代码以防止多个 dropdown-btn 元素上的活动类