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頁面）

回答

相關問題