javascript - 切换 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']();

有一个例子 in the docs它使用 dojo.connect 来实现相同的效果。