Mostrar e ocultar um menu no clique de botão, e escondendo-o com cliques de fora

Question

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">&nbsp;</button></li>
    <li><button type="button" class="optionsbutton" value="somevalue">&nbsp;</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.

Answer 1

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.