jQuery顯示隱藏相同的類並隱藏以前打開的標記

Question

我一直在搞這個一段時間。我將所找到的代碼拼湊在一起，並沒有完全找到完美的解決方案。它幾乎可以工作。我正在使用PHP將文本字符串轉換爲常見問題部分，方法是將<p>標記添加到文本字符串中的每一行。然後，我使用jquery爲每個<p>添加類。然後我有jQuery隱藏顯示切換，所以當單擊一個問題時，顯示答案。我有這個工作。我現在需要的是讓jQuery在單擊不同的問題時隱藏其他答案。這裏是我的代碼：

<script type="text/javascript"> 
      jQuery(document).ready(function($) { 
       $ ('#faq p:even').addClass('question'); 
       $ ('#faq p:odd').addClass('answer'); 

       $('.answer').hide(); 

       $('.question').click(function(e){ 

        e.preventDefault(); 
        // hide all span 
        var $this = $(this).parent().find('.answer'); 
        $(".answer").not($this).hide(); 

        // here is what I want to do 
        $(this).next(".answer").slideToggle("slow", function() { 
        // Animation complete. 
        }); 

       }); 

      }); 
     </script> 

和一些示例HTML

<div id="faq"> 
<p class="question">Question 1</p> 
<p class="answer">Answer 1</p> 
<p class="question">Question 1</p> 
<p class="answer">Answer 1</p> 
<p class="question">Question 1</p> 
<p class="answer">Answer 1</p> 
</div> 

整個想法是，我可以輸入內容到WordPress的編輯器，並把它變成一個常見問題解答部分沒有大量的預編碼的。

Answer 1

您的答案選擇器存在缺陷。它按原樣選擇所有答案。 （如果每個問題/答案對都包裝在一個容器元素中，它就可以工作。）

爲什麼不直接在點擊問題後獲取元素？

$('.question').click(function (e) { 
    var $this = $(this).next('.answer'); 
    $(".answer").not($this).slideUp(); 

    // here is what I want to do 
    $(this).next(".answer").slideToggle("slow", function() { 
     // Animation complete. 
    }); 

}); 

​​