JQuery显示/全部隐藏（FAQ页面）

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

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

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

来源

2012-04-13 Richard Martinez

请勿使用'toggle'来代替使用'hide \ show'。 – 2012-04-13 03:55:41

为什么不让它总是隐藏所有答案？为什么用户需要功能来一次显示所有答案？ – 2012-04-13 04:00:08

@IliaFrenkel谢谢！这就是我所用的（如我选择的答案中所示）。 – 2012-04-13 04:09:18

而不是

$('#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-13 03:57:31

看着你的答案让我感到很蠢。我真的不知道（或者有时间去学习）jQuery，因为我只是为了这个网站而使用它，但是我的一般编程知识应该会导致这样的答案。至少感谢您的快速回复，以便我能继续与其他事情相处。 – 2012-04-13 04:08:20

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

$(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-13 04:38:52 Neil

JQuery显示/全部隐藏（FAQ页面）

回答

相关问题