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/

Answer 2

使用此代码

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

JQuery功能

`

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

`

Answer 3

请试试这个

<div class="announcements">
        <!--Panel 1-->
        <div class="flip">
            <div>
                <h2 class="announcements">title here</h2>
                <div class="announcesig">
                    Informed by: name here<br>Date: date here
                </div>
            </div>
            <div class="slide" style="display: none">
                <p>comment here<br>
                more comment
                <a target="_blank" href="link here">Click Here</a></p>
            </div>
        </div>

        <!--Panel 2-->
        <div class="flip">
            <div>
                <h2 class="announcements">title here</h2>
                <div class="announcesig">
                    Informed by: name here<br>Date: date here
                </div>
            </div>
            <div class="slide" style="display: none">
                <p>comment here<br>
                more comment
                <a target="_blank" href="link here">Click Here</a></p>
            </div>
        </div>
    </div>

，jquery是

$(function() {
            $(".flip").click(function(){
                $('.slide').hide();
                $(this).find('.slide').slideToggle("fast");
            });
        })

jQuery，幻灯片切换仅适用于1个部分

3 个答案: