Dojo 切换隐藏和显示 div

Posted 2023-02-21

【中文标题】Dojo 切换隐藏和显示 div

【英文标题】：Dojo Toggle Hide and Show Divs

【发布时间】：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 进行自动切换。

【参考方案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”）。