javascript - 通过单击标题显示和消失 div 内容

Question

我对 jQuery 知之甚少，但我想在 html 中执行类似的操作:以获得嵌套结构

<div id="special">
   <div>Some content</div>
   <div>Some content</div>
   <div>Some content</div>
</div>

并给出一些关于special的说明，这样里面的内容不会立即出现，而是只有在点击标题后才会出现，如果再次点击标题，它就会再次消失。如果能有像 accordion 中那样的效果就好了，但关键是要获得相同的结果，而不是单击另一个框，而是单击同一个框。

我想它一定是在某个地方完成的，但我只是不知道合适的关键词。任何想法或对已完成示例的引用都将非常有帮助和受欢迎。

Answer 1

这里有一个简单的方法来做同样的事情。我在 special 中添加了一个额外的 head 元素，用于切换行元素

$(function() {
  $("#head").click(function() {
    $(this).nextAll('.row').toggleClass('visible');
  });
});

#special {
  border: 1px solid red;
  display: table;
}
#head {
  height: 10px;
  border: 1px solid blue;
  display: table-row;
  cursor: pointer;
}
.row {
  display: none;
}
.visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="special">
  <div id="head">Header</div>
  <div class="row">Some content</div>
  <div class="row">Some content</div>
  <div class="row">Some content</div>
</div>