單個元素的多個點擊處理程序

Question

我編寫了一些事件來處理快照js抽屜的打開和關閉。 下面的代碼可以工作，但我認為它可以更有效地編寫。 有什么建議么？

function openMobileMenu() {
    event.preventDefault();
    snapper.open('left');
    $('#btn-menu').off('click', openMobileMenu);
    $('#btn-menu').on('click', closeMobileMenu);
}

function closeMobileMenu() {
    event.preventDefault();
    snapper.close('left');
    $('#btn-menu').on('click', openMobileMenu);
    $('#btn-menu').off('click', closeMobileMenu);
}

$('#btn-menu').on('click', openMobileMenu);

Answer 1

使用變量來跟蹤狀態：

var menu_open = false;
$("#btn-menu").on('click', function(event) {
    event.preventDefault();
    if (menu_open) {
        snapper.close('left');
    } else {
        snapper.open('left');
    }
    menu_open = !menu_open; // toggle variable
});

Answer 2

snap具有.state()方法，該方法返回一個填充了屬性的對象，其中一個是.state 。

我想你要：

$('#btn-menu').on('click', function() {
    if(snapper.state().state == "closed") {
        snapper.open('left');
    } else {
        snapper.close('left');
    }
});

或者，一行：

$('#btn-menu').on('click', function() {
    snapper[['close','open'][+(snapper.state().state == 'closed')]]('left');
});

另外，請檢查如何制作切換按鈕？ 在文檔中。

Answer 3

使您的代碼模塊化，使概念明確。

您可以從創建一個封裝邏輯的MobileMenu對象開始。

注意：以下代碼未經測試。

var MobileMenu = {
    _snapper: null,
    _$button: null,
    _direction: 'left',
    init: function (button, snapper, direction) {
        this._$button = $(button);
        this._snapper = snapper;
        if (direction) this._direction = direction;

        this._toggleSnapperVisibilityWhenButtonClicked();
    },
    _toggleSnapperVisibilityWhenbuttonClicked: function () {
        this._$button.click($.proxy(this.toggle, this));
    },
    toggle: function () {
        var snapperClosed = this._snapper.state().state == 'closed',
            operation = snapperClosed? 'open' : 'closed';

        this._snapper[operation](this._direction);
    }
};

然后，您可以在頁面中執行以下操作來初始化功能：

var mobileMenu = Object.create(MobileMenu).init('#btn-menu', snapper);

從長遠來看，模塊化代碼將使其更易於維護和理解，但也可以對它進行單元測試。 由於組件的公開API允許其他代碼與之交互，因此您還可以靈活得多地獲得收益。

例如，您現在可以使用mobileMenu.toggle()切換菜單可見性。