FAQ页面自动显示答案

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(