javascript - dojo 根据类名切换 div

Question

我想通过单击标题来切换容器中的内容 div。该网站使用 DOJO。

我这里有一个jsfiddle:http://jsfiddle.net/cyuwLzkf/90/

我希望同一类的所有容器都具有这种行为。我知道如何在 jquery 中执行此操作，但不知道如何在 dojo 中执行此操作

<div class="container">
  <div class="header">
     This is my heading 
  </div>
  <div class="content hidden">
  This is the content of my message that should be hidden by default and toggled by clicking the header.
  </div>
</div>

我不确定如何将显示/隐藏添加到多个元素，或者如何选择与刚刚单击的标题位于同一容器内的内容 div。也可以将显示/隐藏添加到容器本身。如果这样更容易的话。

Answer 1

这是你的 fiddle 的固定代码:

require(["dojo/query", "dojo/dom", "dojo/dom-class", "dojo/on", "dojo/domReady!"],
    function(query, dom, domClass, on){
    
    query(".container").forEach(function(node){
	var header, content;
  header = node.getElementsByClassName("header")[0];
  content = node.getElementsByClassName("content")[0];
	on(header, "click", function(){
        domClass.contains(content, "hidden")? domClass.replace(content, "show", "hidden"):         
                                         domClass.replace(content, "hidden", "show");
});
})
         
});

.foo {
    /* add custom css */
}
.container{
  display: block;
  width: 200px;
  border: 1px solid black;
}
.container .header {
  background-color: grey;
}
.hidden {
  display: none;
}
.show {
  display: block;
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>

<div>
    Add markup here
    <div class="container">
     <div class="header">
     This is my heading 
     </div>
      <div class="content hidden">
      This is the content of my message that should be hidden by default and toggled by clicking the header.
      </div>
    </div>
    
    <h2> Here a second container that needs same behaviour</h2>
    <div class="container">
     <div class="header">
     This is my heading 2
     </div>
      <div class="content hidden">
      And some other content that should be hidden.
      </div>
    </div>
      
</div>