Javascript 通过单击标题显示和分解div内容

我对

jQuery

知之甚少，但我想在

html

中执行类似的操作：使用嵌套结构

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

一些内容
一些内容
一些内容

并给出一些关于

特殊

的说明，这样里面的内容不会立即出现，而只是在单击标题后出现，如果再次单击标题，则会再次消失。有一个类似中的效果会很好，但关键是要有相同的结果，而不是单击另一个框，而是单击同一个框

---

我想一定是在什么地方做的，但我就是不知道合适的关键词。任何关于已完成示例的想法或参考都将非常有用和受欢迎。

以下是一个简单的方法。我在special中添加了一个额外的head元素，用于切换行元素

$（函数（）{
$（“#头”）。单击（函数（）{
$（this）.nextAll（'.row'）.toggleClass（'visible'）；
});
});
#特殊{
边框：1px纯红；
显示：表格；
}
#头{
高度：10px；
边框：1px纯蓝色；
显示：表格行；
光标：指针；
}
.行{
显示：无；
}
.可见{
显示：块；
}

标题
一些内容
一些内容
一些内容
我不知道是否正确，但我的建议如下：

Javascript

$('h1').on('click', function(){
    $(this).next('div').slideToggle();
});

HTML

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

<button class="title">Title</button>
<div id="special">
   <div>Some content</div>
   <div>Some content</div>
   <div>Some content</div>
</div>

您也可以在纯CSS中执行此操作。可能看起来像：

div#special {
  height: 20px;
  width: 100px;
  background-color: red;
}

div#special:before {
  position: absolute;
  content: 'click me!';
  color: white;
}

div#special:focus:before {
  display: none;
}

div#special:focus {
  background-color: transparent;
}

div#special > div {
  display: none;
}

div#special:focus > div {
   display: block;
}

但是你也需要稍微修改一下你的HTML，我们需要一个
tabIndex
，这样才能工作

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


一些内容
一些内容
一些内容

演示版：
HTML

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

<button class="title">Title</button>
<div id="special">
   <div>Some content</div>
   <div>Some content</div>
   <div>Some content</div>
</div>


一些内容
一些内容
一些内容
$（“#特殊”）。单击（函数（）{
$（“#特殊1”）.toggle（）；
});

单击div
#special
上的任意位置
#special1
在下一次单击时出现并消失。
不要再搜索了，您确实需要：。文档编制得很好，并提供了一个符合您需要的示例。这里的
标题是什么？你能像其他人一样给我一些演示吗？我不习惯仅仅通过阅读代码来想象效果。谢谢
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<div id="special" style="width:200px;height:200px;background:green;">
   <div id="special1" style="width:200px;height:20px;background:red;">Some content</div>
   <div>Some content</div>
   <div>Some content</div>
</div>

<script>
    $("#special").click(function(){
        $("#special1").toggle();
});
</script>