0

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 inserir a descrição da imagem aqui

Ao clicar na borda do botão onde esta o icone inserir a descrição da imagem aqui

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);
1
  • classie.remove () isso me parece estranho...
    – hugocsl
    21/01/2021 às 16:59

1 Resposta 1

0

Olá.

Removendo a classe do elemento você não remove o atributo class. Isso ocorre porque pode ser que o elemento possua várias classes css e ao remover uma classe o atributo classe continua lá para que as outras não sejam perdidas, entende?

Na minha opinião isso não é um problema, mas se isso lhe incomoda, segue o código para corrigir isso:

    function toggleMenu() {
        document.body.classList.toggle('show-menu');
    }

ou usando essa biblioteca Classie:

    function toggleMenu() {
        classie.toggle( bodyEl, 'show-menu' );
    }

Espero ter ajudado.

1
  • Desculpe, acho que não consegui explicar o problema. O problema que estou tento é em colocar "show-menu" no atributo class quando clico no icone de hambúrguer, estranhamente, quando clico na borda do button que o pai do elemento span onde está o icone 22/01/2021 às 14:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .