切換Dojo dijit的顯示

Question

我正在嘗試在Dojo中實現div dijit的基本顯示/隱藏。 基於我使用過的其他JavaScript框架，這應該很容易，但是我發現充其量是困難的。

這是來自

<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.fx");
var toggler = null;
function basicToggle() {
    toggler = new dojo.fx.Toggler({
        node: "panel",
        showFunc : dojo.fx.wipeIn,
        hideFunc : dojo.fx.wipeOut
    })
}
dojo.addOnLoad(basicToggle);
</script>

下面是我體內的代碼。

<button dojoType="dijit.form.Button">    
    <img src="wrapper/images/header-settings.png" border="0" />     
    <script type="dojo/method" event="onClick">   
        toggler[dijit.byId("panel").attr("displayed") ? 'show':'hide']();
    </script>
</button>   
<div id="panel" dojoType="dijit.layout.ContentPane" style="border: .2em dotted     #900;display: none">
This is a content pane.</div>
</body>

我現在看到的行為是，在單擊按鈕后會暫時顯示div，然后再次將其隱藏。 我究竟做錯了什么？

Answer 1

我認為您的顯示/隱藏邏輯向后？ 另外，我認為“顯示”來自非常非常老的Dojo版本。 嘗試只看一下樣式（請注意，這在我檢查“無”時再次翻轉了邏輯）

toggler[(dojo.style("panel","display") == "none") ? 'show':'hide']();

文檔中有一個使用dojo.connect達到相同效果的示例。