jQuery的滑动效果

Question

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

Answer 1

将您的所有ID转换为类，并为单击函数提供上下文：

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

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

Answer 2

ID必须是唯一的。

Here是一个更新的提琴。我已经用类名替换了I，并使用.next()来获得适当的答案元素。

Answer 3

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

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

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

请注意，我还需要更改CSS，并添加了一个use next('.answer')，以使切换仅针对所单击问题的后续答案。

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