javascript - jQuery Accordion 选项卡不会关闭

Question

有人可以解释为什么我的 jQuery Accordion 没有关闭吗？

查看在页面加载时打开 的选项卡。当我尝试关闭时，它会不断重新打开。帮忙？!

http://jsfiddle.net/02vz11f0/

这是我的 jQuery:

$(document).ready(function ($) {
    $('#accordion').find('.accordion-toggle').click(function () {
        $(this).next().slideToggle('fast', function () {
            var status = $(this).is(':hidden') ? 'open' : 'close';
            $(this).prev('h4').find('.accordion-status').html(status);
        });
    });
});

CSS:

/* Separate component file for Accordion? */

/* line 72, sass/_layout.scss */
 #accordion {
    width: 100%;
}
/* line 73, sass/_layout.scss */
 .accordion-content {
    display: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 50px;
}
/* line 80, sass/_layout.scss */
 .accordion-content.default {
    display: block !important;
}
/* line 82, sass/_layout.scss */
 .accordion-status {
    position: absolute;
    top: 30px;
    right: 30px;
}
/* line 88, sass/_layout.scss */
 .accordion-toggle {
    cursor: pointer;
    position: relative;
    padding: 35px 60px 35px 0;
    margin: 0;
}
/* line 94, sass/_layout.scss */
 .accordion-toggle span {
    margin-left: 60px;
    color: #ffffff;
}

Answer 1

您需要从 .slideToggle() 回调中的元素中删除 default 类。

Updated Example

$('#accordion').find('.accordion-toggle').click(function () {
    $(this).next().slideToggle('fast', function () {
        var status = $(this).is(':hidden') ? 'open' : 'close';
        $(this).removeClass('default').prev('h4').find('.accordion-status').html(status);
    });
});

在您的 CSS 中，您有以下内容:

.accordion-content.default {
    display: block !important;
}

阻止内容被切换。

您也可以只删除 !important，它也会按预期工作。您应该尽可能避免使用它。