Anzeigen und ein Menü auf der Schaltfläche klicken versteckt, und es mit externen Klicks versteckt

Question

Ich habe den folgenden Code, der nur Kontrollen in Bezug auf ein Element hat.

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

Das Optionsmenü (das ul in dem li.options) ist standardmäßig in der CSS (via display: none) versteckt. Ich möchte einen Klick auf die Schaltfläche Optionen (button.optionsbutton) hin- und herzuschalten zeigt und die ul versteckt, aber ich möchte auch ein Klick auf eine andere Schaltfläche Optionen (es gibt viele Einzelteile mit diesem Knopf) alle geöffneten Menüs zu schließen und ich brauche ein auf eine beliebige Stelle nicht auf eine Schaltfläche und das Menü zu schließen. Mein JQuery-Code ist unter:

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

Die Menüs öffnen richtig, wenn die Tasten angeklickt werden und schließen, wenn eine andere Schaltfläche geklickt wird oder es gibt einen Klick außerhalb des Menüs. Aber auf der gleichen Schaltfläche schließt sich nicht zweimal das Menü! Was ist der Deal hier Leute, ich weiß, ist es einfach, aber ich habe stundenlang meinen Kopf gegen sie wurde zu schlagen.

Answer 1

Die Linie $('ul.controls li.options').hide(); wird wahrscheinlich Ihr Menü verstecken.

Wenn dies der Fall ist, wird der Test if ( OptionMenu.is(':visible') ) immer false zurück und das Menü zeigen.