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

Question

我的页面上有很多标题（h1），我想在每个标题之后添加一个“显示/隐藏”功能，以显示后面的特定内容，而不必为每个内容手动添加一个 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();
});

这是小提琴。

单击任何 h1 标签以查看它的实际效果；）