dojox.layout.ExpandoPane大家都知道它的显示隐藏有一个toggle()方法，但是有的情况下需要动态的来控制显示隐藏,比如我想单击某几个按钮让它显示，某几个按钮让它隐藏，很显然这个方法就不能使用了。我查了一下它的源码

dojo.provide("dojox.layout.ExpandoPane");
dojo.experimental("dojox.layout.ExpandoPane"); // just to show it can be done?
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit._Templated");
dojo.require("dijit._Contained");
dojo.declare("dojox.layout.ExpandoPane",
    [dijit.layout.ContentPane, dijit._Templated, dijit._Contained, dijit._Container],
    {
    // summary: An experimental collapsing-pane for dijit.layout.BorderContainer
    //
    // description:
    //      Works just like a ContentPane inside of a borderContainer. Will expand/collapse on
    //      command, and supports having Layout Children as direct descendants
    //
    //maxHeight: "",
    //maxWidth: "",
    //splitter: false,
                                                     
    templateString: dojo.cache("dojox.layout","resources/ExpandoPane.html"),
    // easeOut: String|Function
    //      easing function used to hide pane
    easeOut: "dojo._DefaultEasing",
                                                     
    // easeIn: String|Function
    //      easing function use to show pane
    easeIn: "dojo._DefaultEasing",
                                                     
    // duration: Integer
    //      duration to run show/hide animations
    duration: 420,
    // startExpanded: Boolean
    //      Does this widget start in an open (true) or closed (false) state
    startExpanded: true,
    // previewOpacity: Float
    //      A value from 0 .. 1 indicating the opacity to use on the container
    //      when only showing a preview
    previewOpacity: 0.75,
                                                     
    // previewOnDblClick: Boolean
    //      If true, will override the default behavior of a double-click calling a full toggle.
    //      If false, a double-click will cause the preview to popup
    previewOnDblClick: false,
    baseClass: "dijitExpandoPane",
    postCreate: function(){
        this.inherited(arguments);
        this._animConnects = [];
        this._isHorizontal = true;
                                                         
        if(dojo.isString(this.easeOut)){
            this.easeOut = dojo.getObject(this.easeOut);
        }
        if(dojo.isString(this.easeIn)){
            this.easeIn = dojo.getObject(this.easeIn);
        }
                                                     
        var thisClass = "", rtl = !this.isLeftToRight();
        if(this.region){
            switch(this.region){
                case "trailing" :
                case "right" :
                    thisClass = rtl ? "Left" : "Right";
                    break;
                case "leading" :
                case "left" :
                    thisClass = rtl ? "Right" : "Left";
                    break;
                case "top" :
                    thisClass = "Top";
                    break;
                case "bottom" :
                    thisClass = "Bottom";
                    break;
            }
            dojo.addClass(this.domNode, "dojoxExpando" + thisClass);
            dojo.addClass(this.iconNode, "dojoxExpandoIcon" + thisClass);
            this._isHorizontal = /top|bottom/.test(this.region);
        }
        dojo.style(this.domNode, {
            overflow: "hidden",
            padding:0
        });
                                                         
        this.connect(this.domNode, "ondblclick", this.previewOnDblClick ? "preview" : "toggle");
                                                         
        if(this.previewOnDblClick){
            this.connect(this.getParent(), "_layoutChildren", dojo.hitch(this, function(){
                this._isonlypreview = false;
            }));
        }
                                                         
    },
                                                     
    _startupSizes: function(){
                                                         
        this._container = this.getParent();
        this._closedSize = this._titleHeight = dojo.marginBox(this.titleWrapper).h;
                                                         
        if(this.splitter){
            // find our splitter and tie into it‘s drag logic
            var myid = this.id;
            dijit.registry.filter(function(w){
                return w && w.child && w.child.id == myid;
            }).forEach(dojo.hitch(this,function(w){
                this.connect(w,"_stopDrag","_afterResize");
            }));
        }
                                                         
        this._currentSize = dojo.contentBox(this.domNode);  // TODO: can compute this from passed in value to resize(), see _LayoutWidget for example
        this._showSize = this._currentSize[(this._isHorizontal ? "h" : "w")];
        this._setupAnims();
        if(this.startExpanded){
            this._showing = true;
        }else{
            this._showing = false;
            this._hideWrapper();
            this._hideAnim.gotoPercent(99,true);
        }
                                                         
        this._hasSizes = true;
    },
                                                     
    _afterResize: function(e){
        var tmp = this._currentSize;                        // the old size
        this._currentSize = dojo.marginBox(this.domNode);   // the new size
        var n = this._currentSize[(this._isHorizontal ? "h" : "w")]
        if(n > this._titleHeight){
            if(!this._showing){
                this._showing = !this._showing;
                this._showEnd();
            }
            this._showSize = n;
            this._setupAnims();
        }else{
            this._showSize = tmp[(this._isHorizontal ? "h" : "w")];
            this._showing = false;
            this._hideWrapper();
            this._hideAnim.gotoPercent(89,true);
        }
                                                         
    },
                                                     
    _setupAnims: function(){
        // summary: Create the show and hide animations
        dojo.forEach(this._animConnects, dojo.disconnect);
                                                         
        var _common = {
                node:this.domNode,
                duration:this.duration
            },
            isHorizontal = this._isHorizontal,
            showProps = {},
            hideProps = {},
            dimension = isHorizontal ? "height" : "width"
        ;
        showProps[dimension] = {
            end: this._showSize
        };
        hideProps[dimension] = {
            end: this._closedSize
        };
                                                         
        this._showAnim = dojo.animateProperty(dojo.mixin(_common,{
            easing:this.easeIn,
            properties: showProps
        }));
        this._hideAnim = dojo.animateProperty(dojo.mixin(_common,{
            easing:this.easeOut,
            properties: hideProps
        }));
        this._animConnects = [
            dojo.connect(this._showAnim, "onEnd", this, "_showEnd"),
            dojo.connect(this._hideAnim, "onEnd", this, "_hideEnd")
        ];
    },
                                                     
    preview: function(){
        // summary: Expand this pane in preview mode (does not affect surrounding layout)
        if(!this._showing){
            this._isonlypreview = !this._isonlypreview;
        }
        this.toggle();
    },
    toggle: function(){
        // summary: Toggle this pane‘s visibility
        if(this._showing){
            this._hideWrapper();
            this._showAnim && this._showAnim.stop();
            this._hideAnim.play();
        }else{
            this._hideAnim && this._hideAnim.stop();
            this._showAnim.play();
        }
        this._showing = !this._showing;
    },
                                                     
    _hideWrapper: function(){
        // summary: Set the Expando state to "closed"
        dojo.addClass(this.domNode, "dojoxExpandoClosed");
                                                         
        dojo.style(this.cwrapper,{
            visibility: "hidden",
            opacity: "0",
            overflow: "hidden"
        });
    },
                                                     
    _showEnd: function(){
        // summary: Common animation onEnd code - "unclose"
        dojo.style(this.cwrapper, {
            opacity: 0,
            visibility:"visible"
        });
        dojo.anim(this.cwrapper, {
            opacity: this._isonlypreview ? this.previewOpacity : 1
        }, 227);
        dojo.removeClass(this.domNode, "dojoxExpandoClosed");
        if(!this._isonlypreview){
            setTimeout(dojo.hitch(this._container, "layout"), 15);
        }else{
            this._previewShowing = true;
            this.resize();
        }
    },
                                                     
    _hideEnd: function(){
        // summary: Callback for the hide animation - "close"
        // every time we hide, reset the "only preview" state
        if(!this._isonlypreview){
            setTimeout(dojo.hitch(this._container, "layout"), 25);
        }else{
            this._previewShowing = false;
        }
        this._isonlypreview = false;
                                                         
    },
                                                     
    resize: function(/** Object? */newSize, /**Object?*/ currentSize){
        // summary:
        //      we aren‘t a layout widget, but need to act like one:
        // newSize: Object
        //      The size object to resize to
        // currentSize: Object
        //      The size of my domNode that has already been set (by BorderContainer)
        if(!this._hasSizes){ this._startupSizes(newSize); }
                                                         
        // compute size of container (ie, size left over after title bar)
        this._contentBox = {
            w: newSize && "w" in newSize ? newSize.w : currentSize.w,
            h: (newSize && "h" in newSize ? newSize.h : currentSize.h) - this._titleHeight
        };
        dojo.style(this.containerNode, "height", this._contentBox.h + "px");
        if(newSize){
            dojo.marginBox(this.domNode, newSize);
        }
        this._layoutChildren();
    },
                                                     
    _trap: function(e){
        // summary: Trap stray events
        dojo.stopEvent(e);
    }
});

   查看了它的toggle方法实现，所以就要可以直接动态控制了

var leftContent = dijit.byId("leftContent");
        if(((url == "meterReading/list.jsp") || (url == "statistics/statistics.jsp")) && (dijit.byId("leftContent")._showing == true))
        {
            leftContent._hideWrapper();
            leftContent._showAnim && leftContent._showAnim.stop();
            leftContent._hideAnim.play();
        }else
        {
            leftContent._hideAnim && leftContent._hideAnim.stop();
            leftContent._showAnim.play();
        }

本文出自 “GUI” 博客，谢绝转载！