Question

我们说我只需点击一下即可打开手风琴标签，我想通过第二次点击关闭它。

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

<system.web>
    <!--This item defines the validation key that is shared between this 
    application and the second app (both have this exact line in order 
    to share the authentication cookie between them and prevent the
    user from having to log in more than once)

    You can generate keys here: 
    http://www.eggheadcafe.com/articles/GenerateMachineKey/GenerateMachineKey.aspx
    -->
    <machineKey validationKey="77AC2038C364CC68F1C81B8C0517DEFC7599E0C801851CB9648CF242CA1561193D11B5B034753CDBD98F3126EFDF8227B69BBD6BEC4F33DB0C9A6C9A12D40A0C" 
        decryptionKey="8ED6E18D4840AB84A95161970154E31D80A0BDD1615C6A02F1DCD9DA382BB8C2" 
        decryption="3DES"/>
</system.web>

HTML：

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

}());

建议？

Answer 1

我会这样做，只是一些伪

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

Answer 2

我猜你正在寻找这个。修改了showAccordionContent方法逻辑了一下。

希望这就是你要找的东西。

此更改现在将在点击它时关闭已打开的手风琴。一旦你点击将打开的非活动的accordion-header。可能存在用户在此代码更改后关闭所有手风琴的情况。

Console.ReadKey

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

2 个答案: