Привет. У меня такая проблема. Есть выпадающее окно с меню навигацией которое появляется только на мобильных экранах. Там только одна кнопка закрыть окно. Хотелось бы сделать несколько. Не получается ничего даже если использовать querySelectorAll. Подскажите как можно решить проблему? Что за мода пошла использовать только один класс. Зачем вообще такие скрипты создают где можно назначать только одному элементу данное свойство?
Скрипт
(function() {
var triggerBttn = document.getElementById( 'button-menu' ),
overlay = document.querySelector( 'div.overlay' ),
closeBttn = overlay.querySelector( '.overlay-close' );
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function toggleOverlay() {
if( classie.has( overlay, 'open' ) ) {
classie.remove( overlay, 'open' );
classie.add( overlay, 'close' );
var onEndTransitionFn = function( ev ) {
if( support.transitions ) {
if( ev.propertyName !== 'visibility' ) return;
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
classie.remove( overlay, 'close' );
};
if( support.transitions ) {
overlay.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
}
else if( !classie.has( overlay, 'close' ) ) {
classie.add( overlay, 'open' );
}
}
triggerBttn.addEventListener( 'click', toggleOverlay );
closeBttn.addEventListener( 'click', toggleOverlay );
})();
