javascript - jQuery的幻灯片效果

Question

嗨，我一直在使用 jQuery 的幻灯片效果遇到这个问题，我想要得到的效果是当您单击问题时答案会向下滑动。它适用于第一个问题，但不适用于接下来的几个问题。这是一个指向示例http://jsfiddle.net/p8CLN/3/ $(document).ready(function(){ $("#question").click(function(){ $("#answer").slideToggle("slow"); }); });的链接， 我真的被这个难住了。

Answer 1

将所有 ID 转换为类，并为 click 函数提供上下文：

$(document).ready(function(){
    $(".question").click(function(){
        $(this).next(".answer").slideToggle("slow");
    });
});

在此处查看更新的小提琴 - http://jsfiddle.net/teddyrised/p8CLN/8/

Answer 2

ID 必须是唯一的。

这是一个更新的小提琴。我已将 ID 替换为类名并用于.next()获取适当的答案元素。

Answer 3

question这是因为您正在使用具有 id和的多个元素answer。id 必须是唯一的，因为 jquery 将在找到第一个 id 后停止构建集合。

我已经更新了你的小提琴来修复：

http://jsfiddle.net/p8CLN/6/

请注意，我还需要更改 CSS 并添加一个用途next('.answer')，以便仅将切换定位到单击问题的后续答案。

        $(document).ready(function(){
          $(".question").click(function(){
            $(this).next(".answer").slideToggle("slow");
          });
        });

Answer 4

您为多个元素提供相同的 id。ID 必须是唯一的。一旦文件准备好。在 document.ready 上，您可以绑定一个单击事件，您可以使用下一个作为解决方案。这是示例

$(document).ready(function()
{
$(".question").click(function()
{
$(this).next(".answer).slideToggle("slow");
});
});