jQuery 切换 Div 切换器

Question

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

本质上我想隐藏答案列，当单击一个问题时，它会淡入。单击另一个问题时，旧答案将淡出，新答案淡入。所以我猜是切换/开关效果？

这是我从 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>

现在这是我到目前为止所做的事情。我已经设法使第一个问题通过动画淡入淡出效果自行打开/关闭。当谈到隐藏其他 div 以显示新 div 时，我迷失了。你能帮忙调整我的 jQuery 插件吗？

      jQuery.fn.fadeToggle = function(speed, easing, callback) {

      return this.animate({opacity: 'toggle'}, speed, easing, callback);  

      };



$(document).ready(function() {

  $("#answer .views-row").hide();

  $("#question .views-row-1").click(function(){

  $("#answer .views-row-1").fadeToggle("slow");

  });

  });

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

Answer 1

我认为这就是您所追求的：

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();
    });
});

您可以尝试一下在这里，我们在这里做的是获取 .index()

的 > 并在下面的索引处显示相应的

（使用 .eq())。 .siblings().fadeOut() 只是一种猜测，它隐藏了之前的答案，因此一次只显示一个，如果您想一次显示任何数字，只需删除该部分即可。