0
我在导航栏中创建了一个下拉菜单,如果我有其中之一,当然没问题,但是如果我有多个下拉菜单,则不会按预期工作。如果我点击第一下拉,它打开,但随后如果我还点击第二下拉它打开后,他们两人打开没有关闭未点击另一个,我该如何实现这样的功能?单个容器上的多个下拉菜单不会互相干扰
这里是我当前的代码:
HTML:
<nav class="navbar">
<ul class="navbar-links">
<li class="navbar-link"><a href="#">Home</a></li>
<li class="navbar-link"><a href="#">About</a></li>
<li class="navbar-link dropdown">
<a href="#">
Projects
<i class="fa fa-caret-down" aria-hidden="true"></i>
</a>
<div class="dropdown-content">
<a href="#">Shanary</a>
<a href="#">Physics Solver</a>
<a href="#">A simple blog</a>
</div>
</li>
<li class="navbar-link dropdown">
<a href="#">
Projects
<i class="fa fa-caret-down" aria-hidden="true"></i>
</a>
<div class="dropdown-content">
<a href="#">Something else</a>
<a href="#">Text Editor</a>
<a href="#">A social Network</a>
</div>
</li>
</ul>
</nav>
CSS:
.navbar {
background-color: #3A506B;
border-bottom: 1px solid #cccccc;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.navbar-links {
margin: 0;
font-size: 16px;
list-style-type: none;
}
.navbar-link,
.dropdown-content a {
display: inline-block;
padding: 20px 0px;
transition: background 0.1s ease-in-out;
}
.navbar-link:hover,
.dropdown-content a:hover {
background: #3f5775;
}
.navbar-link a {
padding: 20px 10px;
color: #5DD39E;
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
padding: 10px;
z-index: 1;
background-color: #3A506B;
}
.dropdown-content a {
display: block;
}
body {
font-family: 'Open Sans', Arial, sans-serif;
background: #FFFFFF;
color: #16302B;
margin: 0px;
}
.visible {
display: block;
}
,到目前为止,这是我的JavaScript文件:
$('.dropdown').click(function() {
$(this).find('.dropdown-content').toggleClass('visible');
});
而且,这里的JSFiddle。
的问题是,他们两人而不关闭另一个开放,这里是正在发生的图像:
我运行了代码片段,它没有像预期的那样去。您无法切换下拉菜单,只需在它们之间切换即可。换句话说,点击下拉菜单并不会让它们消失。这是我想要的。 – Akar
我做了一个编辑....检查出来 – repzero
这样做,谢谢你的答案。我会upvote并确认它。 – Akar