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?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEstava 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>