HDividerBox的skin设置

如下做，但是运用的时候点击divider还是会显示从上到下的分割线该怎么办内？我想只通过img实现打开，关闭操作
另外，问下：如何考虑上下左右都写在一个里面,自动识别
调用时：<mx：HDividerBox id="hd"/>  hd.setStyle("dividerstyle",DividerBox);

package com.twzy.jzb.style   
{   
 import flash.events.MouseEvent;   
  
 import mx.containers.Box;   
 import mx.containers.DividedBox;   
 import mx.controls.Image;   
  
 public class DividerBox extends Box   
 {   
  [Embed(source='assets/divider.jpg')]   
  public static const DividerIcon_Left:Class;   
  [Embed(source='assets/divider.jpg')]   
  public static const DividerIcon_Right:Class;   
  
  private var img:Image = new Image();   
  private var isOpened:Boolean = true;   
  
  private var dividBox:DividedBox = null;   
  
  public function DividerBox()   
  {   
   super();   
  
   this.width = 10;   
   this.height = 72;   
   this.clipContent = true;   
   img.width = 10;   
   img.height = 72;   
   this.addChild(img);   
   //this.removeEventListener(   
   img.rotation = 90;   
   this.addEventListener(MouseEvent.CLICK,onMouseClick);   
  }   
  
  override protected function createChildren():void   
  {   
   super.createChildren();   
   dividBox =this.parent.parent.parent as DividedBox;   
   img.source = DividerIcon_Left;   
  }   
  
  public function onMouseClick(event:MouseEvent):void   
  {   
   if(isOpened)   
   {   
    img.source = DividerIcon_Right;   
    dividBox.getChildAt(0).width = 0;   
    isOpened =false;   
   }    
   else   
   {   
    isOpened = true;   
    img.source = DividerIcon_Left;   
    dividBox.getChildAt(0).width = 220;   
   }   
  }   
  
 }   
}