Question

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

请参阅页面加载时open的标签。当我试图关闭时，它会不断重新打开。帮助？！

这是 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

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

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，它也会按预期工作。你应该尽量避免使用它。

Answer 2

您需要从

中删除!important

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

它压倒了手风琴的动作。

演示：http://jsfiddle.net/02vz11f0/1/

Answer 3

正如我在评论中所说，它是CSS选择器!important上的.accordion-content.default规则。它覆盖了隐藏div的jQuery。请参阅此link，了解如何！important始终覆盖该属性。

jQuery Accordion选项卡未关闭

3 个答案: