jQuery，滑动切换仅适用于 1 个部分

Question

第一次在这里发帖，对我放轻松:)

我是网络开发新手，这是我的第一个元素。我认为我在 HTML 和 CSS 方面还不错，现在我已经开始使用 jQuery。jQuery 是我正在努力的方向。

我在内联网页面的头部有这个:

JQUERY

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("fast");
  });
});

我有这个:

HTML

    <div class="announcements">
        <div id="flip">
            <h2 class="announcements">title here</h2>
            <div class="announcesig">
                Informed by: name here<br>Date: date here
            </div>
        </div>
        <div id="panel">
            <p>comment here<br>
            more comment
            <a target="_blank" href="link here">Click Here</a></p>
        </div>
    </div>

这是按预期工作的，但如果我为另一个 <div class="Announcements"> 做与上面相同的格式它不适用于下一个但仍然适用于第一个。

问题

我是否必须为每个公告做一个脚本，例如#flip1 , #flip2然后为每一个做CSS和HTML？或者有更简单的方法吗？

如果这还不够清楚，我很抱歉。

Answer 1

改用类。正如您在评论中提到的，Id 应该是唯一的，但是类可以多次使用。当您将 id 更改为类时，您可以使用以下内容:

$(document).ready(function(){
  $(".panel").hide();
  $(".flip").click(function(){
    $(this).next().slideToggle("fast");
  });
});

这是一个工作示例:

http://jsfiddle.net/RubenJonker/ygmj3wts/