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>