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(

FAQ页面自动显示答案

1 个答案: