代码：

1. <?xml version="1.0" encoding="utf-8"?> 
2. <logic:ExtensionSet03AS xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                         xmlns:s="library://ns.adobe.com/flex/spark"   
4.                         xmlns:mx="library://ns.adobe.com/flex/mx"   
5.                         xmlns:logic="com.runqianapp.complex.view.logic.*"   
6.                         width="520" height="455" title="扩展设置" fontFamily="宋体" 
7.                         skinClass="skins.TitleSkin" creationPolicy="all" > 
8.     <fx:Script> 
9.         <![CDATA[  
10.             import controller.ImageLocator;  
11.         ]]> 
12.     </fx:Script> 
13.     <fx:Declarations> 
14.         <s:RadioButtonGroup id="extType"/> 
15.         <s:State name="over"/> 
16.         <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
17.     </fx:Declarations> 
18.     <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalGap="0"> 
19.         <mx:VBox width="98%" backgroundColor="#F5F5F5" borderStyle="solid" borderColor="#999999" paddingBottom="10" 
20.                  paddingLeft="6" height="100%" paddingTop="15"  paddingRight="6" verticalGap="2"> 
21.             <mx:HBox width="100%" verticalAlign="middle" height="20"> 
22.                 <s:Label text="本12312312312312" paddingLeft="5"/> 
23.             </mx:HBox> 
24.               
25.             <mx:VBox width="100%" borderStyle="solid" borderColor="#999999" cornerRadius="5" verticalGap="0"> 
26.                 <mx:HBox id="h1" width="100%" height="35" verticalAlign="middle" cornerRadius="5" backgroundColor="#FAFAFA"> 
27.                     <s:Image source="{ImageLocator.accordionIcon1Class}" id="tag1"/> 
28.                     <s:Label text="向下扩展" /> 
29.                     <s:Image source="{ImageLocator.tipOut}" id="tip1"/> 
30.                 </mx:HBox> 
31.                 <mx:VBox id="v1" width="98%"  height="200"  backgroundColor="#FAFAFA"   label="扩展方向"  visible="true" 
32.                          horizontalAlign="center" paddingLeft="10"  paddingTop="8" cornerRadius="5"> 
33.                     <s:Button label="2313123"/> 
34.                 </mx:VBox> 
35.             </mx:VBox> 
36.               
37.             <mx:VBox width="100%" borderStyle="solid" borderColor="#999999" cornerRadius="5" verticalGap="0"> 
38.                 <mx:HBox id="h2" width="100%" height="35" verticalAlign="middle" cornerRadius="5" backgroundColor="#B3D6F8"> 
39.                     <s:Image source="{ImageLocator.accordionIcon2Class}" id="tag2"/> 
40.                     <s:Label text="向下扩展" /> 
41.                     <s:Image source="{ImageLocator.tipOut}" id="tip2"/> 
42.                 </mx:HBox> 
43.                 <mx:VBox id="v2" width="98%"  height="0"  label="跟随扩展格"   backgroundColor="#FAFAFA"    
44.                          horizontalAlign="center" paddingLeft="10"  paddingTop="8" cornerRadius="5"> 
45.                     <s:Button label="2313123"/> 
46.                 </mx:VBox> 
47.             </mx:VBox> 
48.               
49.             <mx:VBox width="100%" borderStyle="solid" borderColor="#999999" cornerRadius="5" verticalGap="0"> 
50.                 <mx:HBox id="h3" width="100%" height="35" verticalAlign="middle" cornerRadius="5" backgroundColor="#B3D6F8"> 
51.                     <s:Image source="{ImageLocator.accordionIcon2Class}" id="tag3"/> 
52.                     <s:Label text="向下扩展" /> 
53.                     <s:Image source="{ImageLocator.tipOut}" id="tip3"/> 
54.                 </mx:HBox> 
55.                 <mx:VBox id="v3" width="98%" height="0" label="跟随其他单元格扩展"    backgroundColor="#FAFAFA"    
56.                          horizontalAlign="center" paddingLeft="10"  paddingTop="8"  cornerRadius="5"> 
57.                     <s:Button label="2313123"/> 
58.                 </mx:VBox> 
59.             </mx:VBox> 
60.               
61.         </mx:VBox> 
62.     </mx:VBox> 
63. </logic:ExtensionSet03AS> 

效果：

其实没什么难度，主要就是给每个HBox 和VBox  ID ,然后给他们添加mouseover out

click等事件 然后在里面对Box的样式进行修改就可以了。例子里HBox的样式还没有做完。。