JQuery 显示/隐藏全部(FAQ 页面)

Question

我在常见问题页面上使用了两个 jQuery 函数。只要单击问题标题 (h4)，第一个就会激活。它基本上会滑动以显示该答案，但也会确保所有其他答案都已关闭(即一次只有 1 个答案打开)。第二个功能是显示/隐藏页面上的所有问题。

每当用户打开常见问题解答答案(由第一个功能激活)然后尝试显示/隐藏所有内容时，我的问题就会出现。显示/隐藏功能使用切换系统，因此这会导致所有问题切换，包括已经显示的问题。结果是(使用 say, show all)显示所有问题，除了已经显示的问题。该答案是隐藏的(因为它已被切换)。理想情况下，它会保持打开状态，因为它已经打开了。

这个问题的最佳解决方案是什么？两个jQuery函数如下:

<script>
// Clicking a question will show that answer and hide all others
$(function() {
  $('#faqQuestions h4').each(function() {
    var tis = $(this),
    state = false,
    answerNext = tis.next('div').hide().css('height','auto').slideUp();
    answerAll = $('#faqQuestions').children('div').hide().css('height','auto').slideUp();
    tis.click(function() {
        state = !state;
        answerAll.slideUp(state);
        $('#faqQuestions').children('h4').removeClass('active');
        answerNext.slideToggle(state);
        tis.addClass('active',state);
    });
  });
});
</script>

<script>
// Show/hide all questions
var toggle = false;
$(function() {
  $('a.toggle').click(function(e) {
      var $this = $(this);
      $('#faqQuestions div').toggle(300,function() {
          if(!toggle) {
              $this.text('Hide All Questions/Answers');
              toggle = !toggle;
          }else {
              $this.text('Show All Questions/Answers');
              toggle = !toggle;
          }
       });
      e.preventDefault();
  });
});
</script>

出于演示目的，我正在处理的页面可在此处获得:http://r-8.us/~richard.r8us/faq

Answer 1

代替

  $('#faqQuestions div').toggle(300,function() {
      if(!toggle) {
          $this.text('Hide All Questions/Answers');
          toggle = !toggle;
      }else {
          $this.text('Show All Questions/Answers');
          toggle = !toggle;
      }
   });

尝试

      if(!toggle) {
          $('#faqQuestions div').show(300);
          $this.text('Hide All Questions/Answers');
      }else {
          $('#faqQuestions div').hide(300);
          $this.text('Show All Questions/Answers');
      }
      toggle = !toggle;