Estava procurando por um menu dropdown com jQuery e encontrei esse exemplo:
Ele abre e fecha normal quando clico fora do menu ou em algum item dele, menos quando abro outro dropdown.
Alguma ideia do que pode ser?
Estava procurando por um menu dropdown com jQuery e encontrei esse exemplo:
Ele abre e fecha normal quando clico fora do menu ou em algum item dele, menos quando abro outro dropdown.
Alguma ideia do que pode ser?
Podes mudar a lógica um bocado para garantir que ele procura os outros dropdown e não só o próprio.
Poderia ser assim:
(jsFiddle)
$(document).click(function(e) {
var target = e.target;
$('.dropdown-menu').each(function() {
var $this = $(this);
var dropdown = $this.prev('.dropdown');
if (dropdown[0] == target) $(this).toggle();
else $(this).hide();
});
});
.btn-group {
position: relative;
display: inline-block;
font-size: 0;
vertical-align: middle;
}
.btn-group + .btn-group {
margin-left: 16px;
}
.btn-group > .dropdown-menu {
list-style-type: none;
z-index: 1000;
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 4px 0;
margin-top: 3px;
min-width: 160px;
font-size: 14px;
border: 1px solid #ccc;
background-color: #fff;
}
.btn-group > .dropdown-menu li a {
display: block;
padding: 3px 12px;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button class="dropdown">Select</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action 1</a></li>
<li><a href="javascript:void(0)">Action 2</a></li>
<li><a href="javascript:void(0)">Action 3</a></li>
</ul>
</div>
<div class="btn-group">
<button class="dropdown">Select</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action 1</a></li>
<li><a href="javascript:void(0)">Action 2</a></li>
<li><a href="javascript:void(0)">Action 3</a></li>
</ul>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).click(function (e) {
var target = e.target;
$('.dropdown-content').each(function () {
var $this = $(this);
var dropdown = $this.prev('.dropdown');
if (dropdown[0] == target) $(this).toggle();
else $(this).hide();
});
});
</script>
</head>
<style>
.btn-group {
position: relative;
display: inline-block;
font-size: 0;
vertical-align: middle;
transition: 0.2s;
}
.btn-group+.btn-group {
margin-left: 16px;
}
.btn-group>.dropdown-content {
list-style-type: none;
z-index: 1000;
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 4px 0;
margin-top: 3px;
min-width: 160px;
font-size: 14px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 7px;
max-height: 350px;
overflow-y: auto;
}
.btn-group>.dropdown-content li a {
display: block;
padding: 3px 12px;
text-decoration: none;
color: inherit;
}
.btn-group>.dropdown-content li a:hover {
background-color: #f8f9fa;
}
.btn-group>.dropdown {
font-size: 20px;
cursor: pointer;
}
.btn-group>.dropdown::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.255em;
box-sizing: border-box;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
.btn-group>.dropdown:hover {
opacity: 0.5;
}
</style>
<body>
<div class="btn-group">
<div class="dropdown">Select</div>
<ul class="dropdown-content">
<li><a href="javascript:;">Action 2</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 3</a></li>
<li><a href="javascript:;">Action 5</a></li>
</ul>
</div>
<div class="btn-group">
<div class="dropdown">Select</div>
<ul class="dropdown-content">
<li><a href="javascript:void(0)">Action 1</a></li>
<li><a href="javascript:void(0)">Action 2</a></li>
<li><a href="javascript:void(0)">Action 3</a></li>
</ul>
</div>
</body>
</html>