jQuery显示/全部隐藏(“常见问题"页面) [英] JQuery Show/Hide All (FAQ page)

问题描述

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

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.

每当用户打开FAQ答案(通过第一个功能激活)，然后尝试全部显示/隐藏时，就会出现我的问题.显示/隐藏功能使用切换系统，因此这将导致所有问题都在切换，包括已经显示的问题.结果是(用说，显示全部)显示了所有问题，除了已经显示的问题.该答案是隐藏的(因为已切换).理想情况下，由于它已经打开，因此它将保持打开状态.

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.

此问题的最佳解决方案是什么?两种jQuery函数如下:

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>

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

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

推荐答案

代替

  $('#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;

这篇关于jQuery显示/全部隐藏(“常见问题"页面)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！