Olá, tudo bem?
Estou com um problema no site que estou criando. Fiz um menu offCanvas para abrir ao clicar no botão em dispositivos mobiles, mas ao clicar no ícone que esta botão, ele aparece o atributo class (pelo modo desenvolvedor é possível ver), mas não é colocado o valor nela, mas ao clicar na borda do botão, ele insere, como é possível ver na imagem a baixo:
Ao clicar no icone dentro do botão
Ao clicar na borda do botão onde esta o icone
HTML do trecho onde esta o botão
<button class="menu-button d-block d-xl-none d-lg-none" type="button" id="open-button">
<span><i class="fas fa-bars"></i></span>
</button>
Javascript para abrir o menu:
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init();
})();
Desde já agradeço!
OBS: No Javascript há algumas funções de outro arquivo que estou utilizando (peguei os códigos de um repositório do GitHub)
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
(function (window) {
"use strict";
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ("classList" in document.documentElement) {
hasClass = function (elem, c) {
return elem.classList.contains(c);
};
addClass = function (elem, c) {
elem.classList.add(c);
};
removeClass = function (elem, c) {
elem.classList.remove(c);
};
} else {
hasClass = function (elem, c) {
return classReg(c).test(elem.className);
};
addClass = function (elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + " " + c;
}
};
removeClass = function (elem, c) {
elem.className = elem.className.replace(classReg(c), " ");
};
}
function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass,
};
// transport
if (typeof define === "function" && define.amd) {
// AMD
define(classie);
} else {
// browser global
window.classie = classie;
}
})(window);
classie.remove ()
isso me parece estranho...