常见问题页面会自动显示答案

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(