Question

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

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

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

有人可以请我指点最新的walkthru。

解决

使用以下组合...

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");
    }
}

Answer 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（）函数都返回播放动画的动画对象。此对象可用于停止，暂停，设置当前动画位置的“百分比”，并获取动画的状态。

Answer 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是使用运算符srcNodeRef创建dijit小部件（如ComboBox或TextArea）时传递为new的ID（请参阅上面代码示例中的“toggle-id”）

Dojo切换隐藏和显示Div

2 个答案: