我是 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< /p>
非常感谢您提前提供帮助!
答案 0 :(得分:0)
在将 display:none
添加到点击的元素之前,您可以遍历所有下拉容器并使用 display:block
设置样式,如下所示:
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
元素上的活动类