Dojo 切换隐藏和显示 div答案

【问题标题】：Dojo Toggle Hide and Show DivsDojo 切换隐藏和显示 div
【发布时间】：2011-11-08 14:40:46
【问题描述】：

我进行了一些搜索，并提出了很多使用 Dojo 切换 div 显示与隐藏的混合结果。

有些人使用dojo.style，看起来可能已经被dojo.fx取代了
有些使用dijit，但因此无法访问 DOM 节点。
有些使用show() 和hide()
一些改变 CSS

我似乎无法让它们中的任何一个工作。

谁能指点我这方面的最新演练。

已解决

使用了以下的组合...

dojo.addOnLoad(function() {
      dojo.style(dojo.byId('myDiv'), "display", "none");
});

并切换它

function toggleDivs(){
    if(   dojo.style(dojo.byId('myDiv'), "display") == "none"){
        dojo.style(dojo.byId('myDiv'), "display", "block");
        dojo.style(dojo.byId('myDiv2'), "display", "none");
    } else {
        dojo.style(dojo.byId('myDiv'), "display", "none");
        dojo.style(dojo.byId('myDiv2'), "display", "block");
    }
}

【问题讨论】：

实现这一点的更简单的方法可能是创建一个带有“display:none”的 css 类并调用 dojo.toggleClass 进行自动切换。

标签： toggle visibility dojo

【解决方案1】：

你为什么不用dojo.fx.Toggler？

var toggler = new dojo.fx.Toggler({

        node: "basicNode"

    });

    dojo.connect(dijit.byId("showButton"), "onClick", toggler, "show");
    dojo.connect(dijit.byId("hideButton"), "onClick", toggler, "hide");
}`

来自道场reference-guide：

Toggler.show() 和 Toggler.hide() 函数都返回播放中动画的动画对象。该对象可用于停止、暂停、设置当前动画位置“百分比”，以及获取动画的状态。

【讨论】：

【解决方案2】：

作为参考，在 dojo 1.7 及更高版本中，定义略有不同（因为 AMD 加载程序）。请参阅dojo reference guide 中的第三个示例。

代码基本上是：

require(["dojo/fx/Toggler", "dojo/fx", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(Toggler, coreFx, dom, on){
  var toggler = new Toggler({
    node: "toggle-id",
    showFunc: coreFx.wipeIn,
    hideFunc: coreFx.wipeOut
  });
  on(dom.byId("hideButton"), "click", function(e){
    toggler.hide();
  });
  on(dom.byId("showButton"), "click", function(e){
    toggler.show();
  });
});

其中 showFunc 和 hideFunc 是自定义动画函数，它们不仅可以显示/隐藏节点，还可以展开/折叠它们的高度。请注意，如果显示/隐藏 dijit 小部件，则切换 id 应该是小部件 id 的父级，例如：

<div id="toggle-id"><div id="textarea-id"></div></div>

其中textarea-id 是在使用运算符new 创建dijit 小部件（如ComboBox 或TextArea）时作为srcNodeRef 传递的id（参见上面代码示例中的“toggle-id”）。

【讨论】：