常見問題頁面會自動顯示答案

Question

我正在嘗試使用jQuery創建一個下拉式常見問題頁面，並且出於某種原因我在加載頁面時顯示了答案。

我有我的jQuery腳本我的網頁

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 

而且我的JavaScript網頁：

<script src="js/threecatsdesign.js"></script> 

我的完整的JavaScript是這樣的：

$(document).ready(function() { 
    $("#categories h3").click(
     function() { 
      $(this).toggleClass("minus"); 
      if ($(this).attr("class") != "minus") { 
       $(this).next().hide(); 
      } 
      else { 
       $(this).next().show(); 
      } 

      $("#image").attr("src", ""); 

      // needed for IE so a placeholder isn't displayed for the image 
      $("#image").attr("style", "display:none;");  } 
    ); // end click 
}); // end ready 

我的HTML是這樣的代碼：

<main id="categories"> 
     <h3>What is this site about?</h3> 
     <div> 
      <ul id="web_images"> 
       <li>We are a website that holds Photoshop lessons called tutorials. Please read our about me page for more information.</li> 
      </ul> 
     </div> 
     <h3>If you hold contests on the site, how do I enter?</h3> 
     <div> 
      <ul id="java_images"> 
       <li>Go to our page called contests in the nav bar and you will need to fill out the form in order to enter.</li> 
      </ul> 
     </div><p> 
     <h3>I have a tutorial I would like to suggest or put up my own. How do I do that?</h3> 
     <div> 
      <ul id="net_images"> 
       <li>Please go fill out our contact form and you will be contaced with 24 hours or less on how to proceed.</li> 
      </ul> 
     </div> 

Answer 1

你需要添加一些CSS來隱藏問題開始。

<style> 
    .faq-question div { 
     display:none; 
    } 
</style> 

我建議把它放在不同的文件中，但是這樣的內聯樣式適用於快速和骯髒的解決方案。

你也應該包裝每個問題和答案的標籤這樣

<div class="faq-question"> 
    <h3>What is this site about?</h3> 
    <div> 
     <ul id="web_images"> 
      <li>We are a website that holds Photoshop lessons called tutorials. Please read our about me page for more information.</li> 
     </ul> 
    </div> 
</div> 

，改變你的JS，以反映要素的變化。

$(".faq-question").click(