1

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

4

2 回答 2

0

代替

  $('#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;
于 2012-04-13T03:57:31.660 回答
0

我认为这样的事情可能更符合你想要完成的事情：

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

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

于 2012-04-13T04:38:52.193 回答