给HDividedBox的dividerPress

我希望，点击HDividedBox的divider时，HDividedBox的一侧隐藏，而当我再次点击divider时显示。

了解到HDividedBox针对divider有：dividerDrag、dividerPress、dividerRelease三个事件。

分别是拖拽、按下、释放。

我选择在按下的时候触发一个事件。然后，在隐藏时，给了一个resize的效果。。。源码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Style>
HDividedBox{
horizontalDividerCursor:Embed(source="assets/allow.png");
}

</mx:Style>
<mx:Script>
<![CDATA[
   import mx.core.UIComponent;
   import mx.events.DividerEvent;

        
   private function hiddenLeft(event:DividerEvent):void{
    var child:UIComponent = event.target.getChildAt(0);
    if(child.width == 0){
     expand1.play();
    }else{
     expand.play();
    }
   }

   ]]>
</mx:Script>
<mx:Resize id="expand" target="{childcontain}" widthTo="0"
        duration="1000"/>
<mx:Resize id="expand1" target="{childcontain}" widthTo="400"
        duration="1000"/>         
<mx:HDividedBox width="100%" height="100%" dividerPress="hiddenLeft(event)" id="container">
<mx:VDividedBox width="400" height="100%" id="childcontain">
<mx:Panel width="100%" height="600" id="pan"/><mx:VBox width="100%" height="100%"/>
</mx:VDividedBox>
<mx:Canvas height="100%" width="100%"/>
</mx:HDividedBox>
</mx:Application>