Anzeigen und Ausblenden eines Menüs beim Klicken auf die Schaltfläche und Ausblenden mit externen Klicks

Question

Ich habe den folgenden Code, der nur Steuerelemente für ein Element enthält.

<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 den li.options) standardmäßig in der CSS versteckt ist (via display: none). Ich möchte einen Klick auf die Optionsschaltfläche (button.optionsbutton), um das Anzeigen und Verbergen der ul anzuzeigen, aber ich möchte auch einen anderen Optionsschaltflächen klicken (es gibt viele Elemente mit dieser Schaltfläche), um alle geöffneten Menüs zu schließen, und ich brauche a Klicken Sie auf eine beliebige Stelle, nicht auf eine Schaltfläche, um das Menü ebenfalls 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, zweimaliges Klicken auf dieselbe Schaltfläche schließt das Menü nicht! Was hier los ist, Leute, ich weiß, es ist einfach, aber ich habe mir stundenlang den Kopf dagegengeschlagen.

Answer 1

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

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