jQuery切换Div切换器

我正在尝试建立一个常见问题页面。该页面将有两列：第一列将有问题列表，第二列将有答案

基本上我想隐藏答案栏，当点击一个问题时，它会淡入。单击另一个问题时，旧答案将淡出，新答案将淡入。所以我猜是切换/切换效应

以下是Drupal的html输出结构：

<!-- Question column -->

<div id="question>

     <div class="views-row views-row-1">
          <div class="question">Question 1 Here!</div>
     </div>

     <div class="views-row views-row-2">
          <div class="question>Question 2 Here!</div>
     </div>

      <div class="views-row views-row-3">
          <div class="question>Question 3 Here!</div>
     </div>

</div>


<!-- Answer column -->

<div id="answer>

     <div class="views-row views-row-1">
          <div class="answer">Answer 1 Here!</div>
     </div>

     <div class="views-row views-row-2">
          <div class="answer>Answer 2 Here!</div>
     </div>

      <div class="views-row views-row-3">
          <div class="answer>Answer 3 Here!</div>
     </div>

</div>

非常感谢您的帮助！ 干杯。

我想这就是你想要的：

jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};
$(function() {
    $("#answer .views-row").hide();
    $("#question .views-row").click(function(){
        var i = $(this).index();
        $("#answer .views-row").eq(i).fadeToggle("slow").siblings().fadeOut();
    });
});

，我们在这里所做的是获取您单击的顶部，并使用下面的索引显示相应的。.sibles.fadeOut只是一个猜测，它隐藏了前面的答案，因此一次只能显示一个答案。如果要同时显示任何数字，只需删除该部分即可。

---

​

你好，尼克，谢谢你的快速回复！你的例子正是我想要的。加上一点CSS，这将是完美的。但我似乎无法让它工作。我想这是因为我简化了html，这会把div的索引搞得一团糟。让我给你们一个我常见问题页面的链接：干杯@Chris-你的HTML中有些东西使.index变得完全不稳定，仍然在试图弄清楚是什么，复制整个内容。它工作得很好：@Chris-啊，你在该页面中使用了非常旧的jQuery版本，1.2.6，有没有升级的机会？1.4.2中的最新版本会让你成功！我现在就更新。在那之后我应该使用你的第一个插件吗？@Chris-Yup，如果升级不是一个选项，这里有一个版本可以使用1.2.x和1.3.x jQuery：

jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};
$(function() {
    $("#answer .views-row").hide();
    $("#question .views-row").click(function(){
        var i = $(this).index();
        $("#answer .views-row").eq(i).fadeToggle("slow").siblings().fadeOut();
    });
});