jQuery Toggle Div切换器

Question

我正在尝试构建FAQ页面。该页面将有2列：第一列将有问题列表，第二列将有答案。

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

这里是我的HTML输出从Drupal的结构：

<!-- 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，我们在这里所做的越来越的.index()的<div>你点击了顶部，表明指数在相应<div>以下（使用.eq()）。 .siblings().fadeOut()只是一个猜测，隐藏了以前的答案，所以一次只能显示一个答案，如果要一次显示任何数字，只需删除该部分即可。