当另一个打开时隐藏侧面菜单中的一个下拉菜单

Question

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

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

我的代码：

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

<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 来使上一个下拉菜单在下一个下拉菜单打开时关闭...下面是它在网站上的实现方式，就在 header地区：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>

EDIT: added code to prevent active class on multiple dropdown-btn elements

当另一个打开时隐藏侧面菜单中的一个下拉菜单

Hide one dropdown in side menu when another opens

html

javascript

jquery

drop-down-menu