Javascript 如何在第二次单击时隐藏手风琴选项卡

比方说，我一次单击打开一个手风琴选项卡，然后我想第二次单击关闭它

这是我到目前为止的JS/jQuery：

var APP = window.APP = window.APP || {};

APP.accordion = (function () {
    var $accordionHeader = $('.accordion__header');
    var $accordionContent = $('.accordion__content');

    var showAccordionContent = function(e) {
        var $t = $(this);

        $accordionHeader.removeClass('accordion__header--active');
        $t.addClass('accordion__header--active');

        $accordionContent.removeClass('accordion__content--expanded');
        $t.next().addClass('accordion__content--expanded');

        $('html, body').animate({
           scrollTop: $t.offset().top - 60
        }, 500);

        e.preventDefault();
    };

    var bindEventsToUI = function () {
        $accordionHeader.on('click', showAccordionContent);
    };

    var init = function () {
        bindEventsToUI();
    };

    return {
        init: init
    };

}());

HTML:

<div class="accordion__tab">
    <a href="#" class="accordion__header accordion__header--active">
        Setting alerts
        <span class="accordion__arrow"></span>
    </a>
    <div class="accordion__content">
        <p>
            {{!-- things --}}
        </p>
        <ul class="cf">
            <li>
                {{!-- more things --}}
            </li>
        </ul>
    </div>
</div>
<div class="accordion__tab">
    <a href="#" class="accordion__header">
        Setting alerts
        <span class="accordion__arrow"></span>
    </a>
    <div class="accordion__content">
        <p>
            {{!-- things --}}
        </p>
        <ul class="cf">
            <li>
                {{!-- more things --}}
            </li>
        </ul>
    </div>
</div>

{{！---事情--}



{{！---更多的东西--}



{{！---事情--}



{{！---更多的东西--}

---

建议？

我会这样做，只是一些伪建议

var bindEventsToUI = function () {
    $accordionHeader.on('click', toggleAccordionContent);
};

var toggleAccordionContent = function (e) {
    var accordionIsOpen = $(this).classList.indexOf('accordion__header--active') >= 0; // may need to use another selector base on `this`

    return accordionIsOpen ? hideAccordionContent.call(this) : showAccordionContent.call(this);
}

---

我猜你在找这个。稍微修改了showAccordionContent方法逻辑

希望这就是你要找的

单击此更改将关闭已打开的accordion。一旦你点击非活动的手风琴头，它就会打开。可能存在这样一种情况，即用户在此代码更改后关闭所有手风琴

var showAccordionContent = function(e) {
                var $t = $(this);

                /*Modified block logic*/
                if($t.hasClass('accordion__header--active')){
                    $t.removeClass('accordion__header--active');
                    $t.next().removeClass('accordion__content--expanded');
                }else{
                    $accordionHeader.removeClass('accordion__header--active');
                    $accordionContent.removeClass('accordion__content--expanded');
                    $t.addClass('accordion__header--active');
                    $t.next().addClass('accordion__content--expanded');
                }


                $('html, body').animate({
                                            scrollTop: $t.offset().top - 60
                                        }, 500);

                e.preventDefault();
            };

---

只需检查该选项卡是否附加了类

.accordion\u内容--expanded

。如果有，请删除该类并返回

。另外，在我看来，你的一个类，无论是
active
还是
expanded
都应该做同样的事情，我认为你可以去掉一个。active应该是指expanded@RobScott两者都有不同的目的。一个元素已展开，另一个元素处于活动状态。检查html，这样你就可以看到我说的。我想这里缺少的是init函数的调用？@SamarthSinha实际上没有。一切正常。我想弄清楚的是如何在手风琴标签打开时关闭它。