当我在 jQuery 中打开其他手风琴项时，如何使同级展开项折叠？答案

【问题标题】：How do I make a sibling expand item collapse as I'm opening other accordion items in jQuery?当我在 jQuery 中打开其他手风琴项时，如何使同级展开项折叠？
【发布时间】：2017-12-03 01:44:24
【问题描述】：

我一直在尝试从头开始开发一种简单的手风琴，但是这个问题使我无法这样做。

我正在尝试实现一种效果，您可以在其中展开项目，弹出内容，加号图标变成目标手风琴项目的减号 - 到目前为止一切都完成了。

问题：

如果您打开了一个手风琴项目并尝试打开另一个手风琴项目，则内容会按原样折叠，但前一个手风琴项目的减号图标不会通过以下代码变为加号。我知道它在 jQuery 端缺少一些东西，但我不知道我需要添加什么。

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

这是我目前的代码：

jquery：

$('.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);
}

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

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

DEMO

【讨论】：

这正是我所需要的。很遗憾我只能选择一种解决方案，因为到目前为止我的所有回复都有效。谢谢大家！

【解决方案2】：

可能有更简单的解决方案，但您也可以使用它：

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

          $(this).find('.plus-minus-toggle').toggleClass('collapsed');

});

演示：

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

.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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

【讨论】：

【解决方案3】：

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

});

【讨论】：