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()只是一個猜測，隱藏了以前的答案，所以一次只能顯示一個答案，如果要一次顯示任何數字，只需刪除該部分即可。