jquery - 当我在 jQuery 中打开其他 Accordion 项时，如何使同级展开项折叠？

Question

我一直在尝试从头开发一个简单的 Accordion ，但这个问题让我无法这样做。

我正在尝试实现一种效果，您可以在其中展开元素，内容弹出，加号图标变成目标 Accordion 元素的减号 - 至此一切都完成了。

问题:

如果您打开了一个 Accordion 项并尝试打开另一个，内容会按预期折叠，但前一个 Accordion 项的减号图标不会通过下面的代码变成加号。我知道它在 jQuery 端缺少一些东西，但我不知道我需要添加什么。

jsFiddle: https://jsfiddle.net/ygjbab2h/

这是我目前的代码:

J查询:

$('.accordion-item .heading').on('click', function(e) {
    e.preventDefault();
    var $content = $(this).next();
    $content.slideToggle(0);
    $('.accordion-item .content').not($content).hide();
    $(this).find('.plus-minus-toggle').toggleClass('collapsed');
});

HTML:

<div class="accordion-item">
    <a href="#" class="heading">
        <div class="title">
            <h1>Heading
                <div class="plus-minus-toggle collapsed"></div>
            </h1>
        </div>
    </a>

    <div class="content" style="display: none;">
        test
    </div>
</div>
<div class="accordion-item">
    <a href="#" class="heading">
        <div class="title">
            <h1>Heading
                <div class="plus-minus-toggle collapsed"></div>
            </h1>
        </div>
    </a>

    <div class="content" style="display: none;">
        test
    </div>
</div>
<div class="accordion-item">
    <a href="#" class="heading">
        <div class="title">
            <h1>Heading
                <div class="plus-minus-toggle collapsed"></div>
            </h1>
        </div>
    </a>

    <div class="content" style="display: none;">
        test
    </div>
</div>

CSS:

.plus-minus-toggle {
    cursor: pointer;
    height: 21px;
    position: relative;
    width: 21px;
}

.plus-minus-toggle:before,
.plus-minus-toggle:after {
    background: #000;
    content: '';
    height: 5px;
    left: 0;
    position: absolute;
    top: 0;
    width: 21px;
    transition: transform 500ms ease;
}

.plus-minus-toggle:after {
    transform-origin: center;
}

.plus-minus-toggle.collapsed:after {
    transform: rotate(90deg);
}

.plus-minus-toggle.collapsed:before {
    transform: rotate(180deg);
}

Answer 1

隔离不是当前标题的标题，例如:

$('.accordion-item .heading').not(this).find('.plus-minus-toggle').addClass('collapsed')

DEMO