javascript - JQuery，隐藏和切换 DIV，常见问题页面

Question

我有一个从 XML 读取的 XSL 页面，它显示了一个问题和答案，如下所示：

<div class="faqs">
    <xsl:for-each select ="TSPRoot/FAQS/FAQ">
<div class="flip">
    <xsl:value-of select ="Question"/>
</div>
<div class="panel">
    <xsl:value-of  select ="Answer" disable-output-escaping ="yes"/>
</div>
    </xsl:for-each >
</div>

我有这个 Jquery：

<script>
  $(document).ready(function(){
      $(".flip").click(function(){
          $(".panel").hide("fast");
          $(this).next().slideToggle("slow");
      });
  });
</script>

要求的是，当我单击任何问题时，其他答案会很好地隐藏，并且只会出现单击问题的答案，这一切都很好......我的问题是问题保持可点击状态，当您单击它时会调用再次使用该功能，它会重复隐藏和显示

除非您单击另一个问题，否则我需要使其不可点击。

Answer 1

从此更改切换

$(this).next().slideToggle("slow");

到

  $(document).ready(function(){

      $(".flip").click(function(){
          $('.selected').removeClass('selected');
          $(this).next().slideDown(5000).addClass('selected');
          $(".panel").not('.selected').hide("fast");         
       });
   });