Несколько обработчиков кликов для одного элемента

Question

Я написал несколько событий для обработки открывания и закрывания ящика jap-ящика. Этот код ниже работает, но я чувствую, что он может быть написан более эффективно. Какие-либо предложения?

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

Сделайте свой код модульным и четко сформулируйте свои концепции.

Вы можете начать с создания объекта 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 вашего компонента, который позволяет другому коду взаимодействовать с ним.

E.g. теперь вы можете переключать видимость меню с mobileMenu.toggle().

Answer 2

Используйте переменную для отслеживания состояния:

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 3

оснастки имеет .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'); 
}); 

Кроме того, проверьте How do I make a toggle button? в документации.