dojo 根据 class 名称切换 div

Question

我想通过单击 header 在容器中切换内容 div。该站点使用 DOJO。

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

我希望相同 class 的所有容器都具有这种行为。我知道如何在 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>

我不确定如何将 show/hide 添加到多个元素或如何 select 与刚刚单击的 header 在同一容器内的内容 div . 也可以将 show/hide 添加到容器本身。如果那更容易。

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>

dojo 根据 class 名称切换 div

dojo toggle divs based on class name

javascript

dojo