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必须是唯一的。

Here是一个更新的小提琴。我已使用类名替换了ID，并使用.next()来获取相应的答案元素。

Answer 3

这是因为您使用ID为question和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。 ids必须是唯一的。一旦文件准备好了。在document.ready上你可以绑定一个click事件你可以使用下一个作为解决方案。这是一个例子

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

jQuery的幻灯片效果

4 个答案: