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

}); 

​​