[英]Multiple drop-downs on a single container without interfering with each other
我在导航栏中创建了一个下拉菜单,如果我有一个下拉菜单当然可以,但是如果我有多个下拉菜单则无法正常工作。 如果我单击第一个下拉菜单,它将打开,但是如果我在打开后也单击第二个下拉菜单,则两个菜单都将打开而不关闭另一个未被单击的菜单,我如何实现这种功能?
这是我当前的代码:
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 。
问题在于,它们两个都打开而没有关闭另一个,这是正在发生的情况的图像:
您将必须遍历所有目标以确定它们是否是当前目标,并删除可见性
请参见下面的代码段
$('.dropdown').click(function(e) { $(this).find('.dropdown-content').toggleClass('visible'); var that = this; $('.dropdown').each(function() { if (that != this) { $(this).find('.dropdown-content').removeClass('visible'); } }) });
.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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.