JQuery 显示/隐藏全部(常见问题解答页面)

Question

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

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

这个问题的最佳解决方案是什么？两个 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;

Answer 2

我认为这样的事情可能更符合您要完成的任务：

$(function() {
    var allOpen = false;
    $("#faqQuestions h4").click(function() {
        var h4 = $(this);
        if(!h4.hasClass("active")) {
            h4.addClass("active").next("div").slideToggle();
        }
        else {
            h4.removeClass("active").next("div").slideToggle();
        }
    });
    $('a.toggle').click(function(e) {
        e.preventDefault();
        $("#faqQuestions h4").each(function() {
            var h4 = $(this);
            if(!allOpen && !h4.hasClass("active")) {        
                h4.addClass("active").next("div").slideToggle();
            }
            else if(allOpen) {
                h4.removeClass("active").next("div").slideToggle();
            }
        });
        if(!allOpen) {
            allOpen = true;
            $(this).text("Hide All Questions/Answers");
        }
        else {
            $(this).text("Show All Questions/Answers");
        }
  });
});

当公开已单击的新常见问题解答部分时，这不再折叠任何打开的常见问题解答部分（对我来说，允许用户一次打开所有常见问题解答部分或一次只能阅读一个部分似乎很奇怪）。