Flex菜单控制 - 单击一个按钮并显示一个菜单。我怎样才能再次点击该按钮并隐藏该菜单？

Question

基本上，我有一个按钮，并点击它显示一个菜单。我想再次单击该菜单并关闭菜单。目前，每次点击按钮，菜单都会重新打开。下面我粘贴了Flex的livedoc例子。如果你点击按钮，菜单会重新打开。

现在，我通过设置var来打开和关闭来操纵它，所以当点击按钮时它会执行检查。但是，如果您单击离开屏幕，则会分派HIDE事件，并关闭菜单。这弄乱了正在设置的open close var。

我该如何让下面这个Flex示例显示按钮单击菜单，然后再点击一下按钮，它会关闭菜单？发挥作用，如果您从菜单上单击，则会关闭它。

此外，我玩弄按钮的MOUSE_DOWN_OUTSIDE事件并设置preventDefault，并将FlexMouseEvent event.cancelable设置为false。

更改为PopUpMenuButton不是一个选项。我必须涉及很多皮肤。

这里是Flex例子：

<mx:Script> 
    <![CDATA[ 
     // Import the Menu control. 
     import mx.controls.Menu; 

     // Create and display the Menu control. 
     private function createAndShow():void { 
      var myMenu:Menu = Menu.createMenu(null, myMenuData, false); 
      myMenu.labelField="@label"; 
      myMenu.show(10, 10); 
     } 
    ]]> 
</mx:Script> 

<!-- Define the menu data. --> 
<mx:XML format="e4x" id="myMenuData"> 
    <root> 
     <menuitem label="MenuItem A" > 
      <menuitem label="SubMenuItem A-1" enabled="false"/> 
      <menuitem label="SubMenuItem A-2"/> 
     </menuitem> 
     <menuitem label="MenuItem B" type="check" toggled="true"/> 
     <menuitem label="MenuItem C" type="check" toggled="false"/> 
     <menuitem type="separator"/>  
     <menuitem label="MenuItem D" > 
      <menuitem label="SubMenuItem D-1" type="radio" 
       groupName="one"/> 
      <menuitem label="SubMenuItem D-2" type="radio" 
       groupName="one" toggled="true"/> 
      <menuitem label="SubMenuItem D-3" type="radio" 
       groupName="one"/> 
     </menuitem> 
    </root> 
</mx:XML> 

<mx:VBox> 
    <!-- Define a Button control to open the menu --> 
    <mx:Button id="myButton" 
     label="Open Menu" 
     click="createAndShow();"/> 
</mx:VBox> 

Answer 1

//Declare menu as an instance variable instead of a local var 
private var myMenu:Menu; 

//var to store menu status 
private var isMenuVisible:Boolean 

//Create the Menu control. call this from the creationComplete of the 
//application or the Component that it is part of. 
private function createMenu():void 
{ 
    var myMenu:Menu = Menu.createMenu(null, myMenuData, false); 
    myMenu.labelField="@label"; 
    //menu fires an event when it is hidden; listen to it. 
    myMenu.addEventListener(MenuEvent.MENU_HIDE, onMenuHidden); 
} 
private function onMenuHidden(e:MenuEvent):void 
{ 
    /* 
    menuHide event fired whenever the menu or one of its submenus 
    are hidden - makes sure it was indeed the main menu that was hidden 
    I don't have compiler handy to test this, so if for 
    some reason comparing myMenu with e.menu doesn't work, 
    try if(e.target == myMenu) instead; 
    And please let me know which one works via comment :) 
    */ 

    if(e.menu == myMenu) 
     isMenuVisible = false; 
} 
//call this from button's click 
private function toggleMenu():void 
{ 
    if(isMenuVisible) 
     myMenu.hide(); 
    else 
     myMenu.show(); 
}