danielsitek
11/10/2016 - 2:10 PM

Simple jQuery dropdown controller

Simple jQuery dropdown controller

var options = {
    rootClass: '.js-menu',
    buttonClass: '.js-menu-toggle',
    isOpen: 'is-open'
};

function _close() {
    $( options.rootClass + '.' + options.isOpen).removeClass(options.isOpen);
}

/** 
 * Because we can have gazillions of similar dropdowns on single page,
 * thats why we handle clicks on body element.
 */ 
$('body').on('click', function(e) {
    if ( $(e.target).is(options.rootClass) || $(e.target).closest(options.rootClass).length ) {
        if ($(e.target).closest(options.buttonClass).length) {
            e.preventDefault();
            if (!$(e.target).hasClass(options.isOpen)) {
                _close();
            }
            $(e.target).closest(options.rootClass).toggleClass(options.isOpen);
        }
    } else {
        _close();
    }
});