jQuery Toggle Div 切换器

Question

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

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

这是我从 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();
    });
});

You can give it a try here，我们在这里所做的是获取您单击顶部的<div> 的.index()，并在下面的索引处显示相应的<div>（使用.eq()）。 .siblings().fadeOut() 只是一个猜测，它隐藏了先前的答案，因此一次只显示一个，如果您想一次显示任何数字，只需删除该部分即可。 ​