Question

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

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

我希望这个行为适用于同一个类的所有容器。我知道如何在jquery中执行此操作，但不是在dojo中执行此操作

＆＃13;

<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>

＆＃13;

＆＃13; 我不确定如何将show / hide添加到多个元素或如何选择与刚刚单击的标题位于同一容器内的内容div。也可以将show / hide添加到容器本身。如果这更容易。

Answer 1

这是你的小提琴的固定代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

dojo根据类名

1 个答案: