Mostrar y ocultar un menú de clic de botón, y ocultando con clics fuera

Question

Tengo el siguiente código que sólo tiene controles relativos a un elemento.

<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>

El menú de opciones (la UL en los li.options) está oculta de manera predeterminada en el css (a través de display: none). Quiero un clic en el botón de opciones (button.optionsbutton) para alternar mostrar y ocultar el ul, pero también quiero un clic en cualquier otro botón de opciones (hay muchos elementos con este botón) para cerrar cualquier menús abiertos y necesito una clic en cualquier lugar no en un botón para cerrar el menú. Mi código de jQuery es a continuación:

$('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();
        }
    }
);

Los menús abiertos correctamente cuando se hace clic en los botones y se cierran cuando se hace clic en otro botón o hay un clic fuera del menú. Pero, al hacer clic en el mismo botón dos veces no se cierra el menú! Cual es el trato aquí gente, sé que es fácil, pero he estado golpeando mi cabeza contra ella durante horas.

Answer 1

La línea de $('ul.controls li.options').hide(); probablemente ocultar su menú.

Si este es el caso, la prueba de if ( OptionMenu.is(':visible') ) siempre devuelve falso y mostrar el menú.