Mostrar e ocultar um menu no clique de botão, e escondendo-o com cliques de fora
-
12-09-2019 - |
Pergunta
Eu tenho o seguinte código que só tem controles relativos a um item.
<ul class="controls">
<li><button type="button" class="button1" value="somevalue"> </button></li>
<li><button type="button" class="optionsbutton" value="somevalue"> </button></li>
<li class="options">
<ul>
<li>Option 1 link</li>
<li>Option 2 link</li>
<li>Option 3 link</li>
</ul>
</li>
</ul>
O menu de opções (o ul nos li.options) está oculta por padrão no css (via display: none). Eu quero um clique no botão Opções (button.optionsbutton) para alternar mostrar e ocultar o ul, mas eu também quero um clique em qualquer outro botão Opções (há muitos artigos com este botão) para fechar quaisquer menus abertos e eu preciso de um clique não em qualquer lugar em um botão para fechar o menu bem. Meu código jQuery é abaixo:
$('button.optionsbutton').click(
function(event){
// hiding any other open menus
$('ul.controls li.options').hide();
var OptionMenu = $(this).parent('li').siblings('.options');
if ( OptionMenu.is(':visible') ) {
$('ul.bit_controls li.bit_options').hide();
} else {
bitOptionMenu.css('display','block');
//because show() sets display to list-item insteads of block
}
event.stopPropagation();
}
);
// So that clicks anywhere outside will close the menu
$('html').click(
function(event){
if(event.target != 'button.options' && $('button.options').is(':visible') ) {
$('ul.controls li.options').hide();
}
}
);
Os menus abrir corretamente quando os botões são clicados e fechar quando outro botão é clicado ou há um clique fora do menu. MAS, clicar no mesmo botão duas vezes não fecha o menu! Qual é o negócio aqui pessoal, eu sei que é fácil, mas eu tenho sido batendo minha cabeça contra ela por horas.
Solução
O $('ul.controls li.options').hide();
linha provavelmente ocultar o seu menu.
Se este for o caso, o if ( OptionMenu.is(':visible') )
teste sempre retornará false e mostrar o menu.