Affichage et masquage d'un menu sur le bouton clic, et se cacher avec des clics en dehors

Question

Je le code suivant qui a juste les contrôles relatifs à un élément.

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

Le menu des options (le ul dans les li.options) est masquée par défaut dans le css (via display: none). Je veux un clic sur le bouton Options (button.optionsbutton) pour basculer afficher et masquer ul, mais je veux aussi un clic sur un autre bouton d'options (il y a beaucoup d'articles avec ce bouton) pour fermer les menus ouverts et j'ai besoin cliquez avec le bouton pas sur un bouton pour fermer le menu ainsi. Mon code Jquery est ci-dessous:

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

Les menus ouverts correctement lorsque les boutons sont cliqués et se ferment lorsque sur un autre bouton ou il y a un clic en dehors du menu. MAIS, en cliquant sur le même bouton deux fois ne fermez pas le menu! Ce qui est l'affaire ici les gens, je sais que je suis facile, mais battons ma tête contre pendant des heures.

Answer 1

La $('ul.controls li.options').hide(); ligne va probablement cacher votre menu.

Si tel est le cas, le if ( OptionMenu.is(':visible') ) test renvoie toujours faux et afficher le menu.