在道场中切换div的可见性

Question

什么是在dojo中切换div的可见性的绝对最简单的方法，没有任何大惊小怪。

在jquery我可以这样做：

$(document).ready(function(){
  $("#mydiv").hide();        
  $("#link-that-toggles-div").click(function()       
  {          
     $("#mydiv").slideToggle();          
  });
}

...

<a href="#" target="_self" id="link-that-toggles-div">Toggle the div</a>
<div id="mydiv">Awesome content</div>

道场有什么相同的东西吗？ 或者我必须自己动手？ 例如，dojo.fx.Toggler强制我手动执行show / hide，而不是简单地给我一个toggle（）函数。 此外，所有示例都使用一个按钮来显示div，另一个用于隐藏它，我不知道为什么在这种情况下它甚至被称为Toggler。

Answer 1

这是一个简单的示例，您可以如何使用一个Button：toggleIn / toggleOut。

require(["dojo/fx/Toggler", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(Toggler, dom, on){
var isClicked = false;
var toggler = new Toggler({
node: "basicNode"
});
 on(dom.byId("toggleButton"), "click", function(e){
    if(isClicked===false){
       toggler.hide();
      isClicked=true;
  }
  else{
      toggler.show();
      isClicked=false;
  }
 });
});

使用变量“isClicked”，您可以更改要使用的切换。

这是上面例子的小提琴： http ： //jsfiddle.net/XLAFz/

此致，Miriam

Answer 2

require(["dojo/dom", "dojo/dom-class", "dojo/on", "dojo/domReady!"],
    function(dom, domClass, on){
        on(dom.byId("ID"), "click", function(){
            domClass.contains("ID", "hide")? domClass.replace("ID", "display", "hide"):         
                                             domClass.replace("ID", "hide", "display");
    }); 
});

/* .hide{display:none} .display{display: block} */