JQuery Show/Hide All (FAQ page)

问题

I'm using two jQuery functions on an FAQ page. The first one activates whenever a question heading (h4) is clicked. It basically slides to show that answer but also makes sure that all other answers are closed (i.e. only 1 answer is open at a time). The second function is one that shows/hides ALL the questions on the page.

My issue arises whenever a user has an FAQ answer open (activated by the first function) and then tries to do a show/hide all. The show/hide function uses a toggling system, so this causes ALL the questions to toggle, including the one that is already showing. The result is that (using say, show all) all questions are shown except the one that was already being shown. That answer is hidden (because it was toggled). Ideally it would stay open since it was already open.

What is the best solution to this problem? The two jQuery functions are as follows:

<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>

For demo purposes, the page I am working on is available here: http://r-8.us/~richard.r8us/faq

回答1:

Instead of

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

try

      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;

回答2:

I think something like this might be more in line with what you're trying to accomplish:

$(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");
        }
  });
});

This no longer collapses any open FAQ section when exposing the new one that's been clicked on (it seemed odd to me to allow a user to open all of them at once or only be able to read one at a time).

来源：https://stackoverflow.com/questions/10135002/jquery-show-hide-all-faq-page

标签

jquery

css

show-hide