javascript - Accordion 样式不可展开和不可点击

Question

我一直在尝试复制 FAQ Accordion 风格，就像这样 here .

问题是第一个问题是折叠的，当我点击其他问题时，它们不会打开，也不会响应我的任何点击。我应该怎么做才能使它正确？我认为我的 JQuery 有问题。

HTML 代码

<div class="accordion-header active-header">Q: Is this free?</div>
<div class="accordion-content open-content" style="display: block;">
    <p>A: Yes, uploading and downloading is 100% Free for all users. We offer PRO accounts which allows for greater flexibility with uploading/downloading.</p>
</div>
<div class="accordion-header inactive-header">Q: Will my files be removed?</div>
<div class="accordion-content">
    <p>A: Free/non accounts files are kept for 90 days. PRO accounts files are kept for unlimited days.</p>
</div>
<div class="accordion-header inactive-header">Q: How many files can I upload?</div>
<div class="accordion-content">
    <p>A: You can upload as many files as you want, as long as each one adheres to the Terms of Service and the maximum file upload size.</p>
</div>
<div class="accordion-header inactive-header">Q: Which files types am I allowed to upload?</div>
<div class="accordion-content">
    <p>A: You may upload the following types of files: Any.</p>
</div>
<div class="accordion-header inactive-header">Q: Are there any restrictions to the size of my uploaded files?</div>
<div class="accordion-content">
    <p>A: Each file you upload must be less than 1.00 GB in size for free/non accounts or less than 10.00 GB in size for PRO accounts. If it is greater than that amount, your file will be rejected.</p>
</div>
<div class="accordion-header inactive-header">Q: Can I upload music or videos?</div>
<div class="accordion-content">
    <p>A: Yes. Music and video hosting is permitted as long as you own the copyright on the content and it adheres to the terms and conditions.</p>
</div>
<div class="accordion-header inactive-header">Q: There are some files on our servers which may have been subject to copyright protection, how can I notify you of them?</div>
<div class="accordion-content">
    <p>A: Via our <a href="report_file.html">report abuse</a> pages.</p>
</div>
<div class="accordion-header inactive-header">Q: Do files have direct links?</div>
<div class="accordion-content">
    <p>A: All users are shown a download page so no direct links are available, we may introduce direct link generation in the future.</p>
</div>

CSS 代码

.accordion-header {
    font-size: 18px;
    background: #ebebeb;
    margin: 5px 0 0 0;
    padding: 14px;
    border: 1px solid #D8D8D8;
    cursor: pointer;
    color: #8E8E8E;
    text-align: left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.active-header {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    background: rgb(96, 168, 227);
    background-repeat: no-repeat;
    background-position: right 50%;
    color: white;
    text-shadow: 1px 1px rgb(72, 141, 197);
}
.inactive-header {
    background: url(images/inactive-header.gif) #fff;
    background-repeat: no-repeat;
    background-position: right 50%;
}
.inactive-header:hover {
    background: url(images/inactive-header.gif) #f5f5f5;
    background-repeat: no-repeat;
    background-position: right 50%;
}
.accordion-content {
    display: none;
    padding: 18px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-top: 0;
    text-align: left;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

JS 代码

$(document).ready(function () {
    'use strict';
    $('.nav').onePageNav({
        filter: ':not(.external)'
    });
});
jQuery(document).ready(function ($) {
    'use strict';
    $('.animated').appear(function () {
        var elem = $(this);
        var animation = elem.data('animation');
        if (!elem.hasClass('visible')) {
            var animationDelay = elem.data('animation-delay');
            if (animationDelay) {
                setTimeout(function () {
                    elem.addClass(animation + " visible");
                }, animationDelay);
            } else {
                elem.addClass(animation + " visible");
            }
        }
    });
});
$(document).ready(function () {
    'use strict';
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });
    $('.scrollup').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });
});

function showUploaderPopup() {
    jQuery('#fileUploadWrapper').modal('show', {
        backdrop: 'static'
    }).on('shown.bs.modal');
}

function createSlowGauge() {
    var opts = {
        lines: 12,
        angle: 0,
        lineWidth: 0.25,
        pointer: {
            length: 0.9,
            strokeWidth: 0.04,
            color: '#000000'
        },
        limitMax: 'true',
        colorStart: '#CF0808',
        colorStop: '#DA0202',
        strokeColor: '#E0E0E0',
        generateGradient: true
    };
    var target = document.getElementById('canvas-slow');
    var gauge = new Gauge(target).setOptions(opts);
    gauge.maxValue = 100;
    gauge.animationSpeed = 128;
    gauge.set(9);
}
$(document).ready(function () {
    $('.accordion-header').toggleClass('inactive-header');
    $('.accordion-header').click(function () {
        if ($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        } else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
    });
    return false;
});

function createFastGauge() {
    var opts = {
        lines: 12,
        angle: 0,
        lineWidth: 0.25,
        pointer: {
            length: 0.9,
            strokeWidth: 0.04,
            color: '#000000'
        },
        limitMax: 'true',
        percentColors: [
            [0.0, "#000000"],
            [0.50, "#cc0000"],
            [1.0, "#00cc00"]
        ],
        strokeColor: '#E0E0E0',
        generateGradient: true
    };
    var target = document.getElementById('canvas-fast');
    var gauge = new Gauge(target).setOptions(opts);
    gauge.maxValue = 100;
    gauge.animationSpeed = 128;
    gauge.set(100);
}! function ($) {
    $(function () {
        var $root = $('html, body');
        $('.smooth-anchor-link').click(function () {
            var href = $.attr(this, 'href');
            $root.animate({
                scrollTop: $(href).offset().top
            }, 500, function () {
                window.location.hash = href;
            });
            return false;
        });
    })
}(window.jQuery);

这是 JSFiddle例如，如果您知道正确的解决方案，您可以尝试更新它:)

附言:我知道这里还有其他类似的问题，但我尝试了所有这些问题，但都没有解决我的问题。

Answer 1

你的代码抛出一个错误 Uncaught TypeError: undefined is not a function 这是由 onePageNav() 和 appear() 引起的，这些不是官方的 javascript/jQuery 函数。如果您从其他地方复制它们，它们很可能是外部插件函数。

只需从您的 javascript 中删除这两个函数即可解决您的点击问题。 JSFiddle link

请注意，您也不需要在 JSFiddle 中使用 $(document).ready(function ()，它会自动执行此操作。

当尝试复制某些东西时，尝试自己从头开始构建它。你不会从仅仅复制整个东西中学到任何东西。尝试编写自己的函数，这样您就可以了解一切是如何工作的。 The jQuery documentations应该有帮助。

如果您有兴趣学习如何使用 Javascript 和/或 jQuery 编写代码，请尝试以下网站:

• > CodeAcademy - 多种语言的一般知识基础。
• > Tuts+ - 关于更具体主题的教程。
• > KhanAcademy
• > Mozilla Docs