Question

我一直试图从头开发一个简单的手风琴，但这个问题让我远离这样做。

我正在努力实现一个效果，你可以扩展项目，内容弹出，加上图标变成目标手风琴项目的减号 - 到目前为止一切都已完成。

问题：

如果您打开了一个手风琴项目并尝试打开另一个，则内容会按原样折叠，但上一个手风琴项目的减号图标不会转到下面的代码加号。我知道它在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);
}

Answer 1

隔离不是当前标题的标题：

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

的 DEMO

Answer 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');

});

演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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');

}）;

当我在jQuery中打开其他手风琴项目时，如何让兄弟姐妹扩展项目崩溃？

3 个答案: