显示隐藏内容（维基百科风格）

Question

我的页面上有很多标题（h1），我想在每个标题之后添加一个“显示/隐藏”功能，以便显示随后的SPECIFIC内容，而无需添加manualy的id每个内容和标题。

我对jquery很新，这就是我到目前为止所做的。正如您将注意到的，问题是每个div都被显示/隐藏。

jQuery代码：

$(document).ready(function(){
  $("h1").append(' [<a class="show-hide">Show/Hide</a>]');
  $(".show-hide").click(function(){
    $("div").slideToggle("normal");
  })
});

HTML代码：

<h1>Title 1</h1>
<div>Content 1</div>
<h1>Title 2</h1>
<div>Content 2</div>
<h1>Title 3</h1>
<div>Content 3</div>

它看起来像这样：

Title 1 [Show/Hide]
Content 1
Title 2 [Show/Hide]
Content 2
Title 3 [Show/Hide]
Content 3

Answer 1

试试这个：

$('h1').click(function (e) {
    $(this).next().toggle();
});

这是fiddle。

点击任何h1标签以查看其实际效果;）