Agrego un nombre de clase con Jquery y funciona, pero solo comienza a funcionar DESPUÉS de mi primer clic. El código solo agrega el atributo 'clase' la primera vez, pero sin el valor. ¿Alguien puede ver lo que hago mal? (la clase solo agrega un margen superior en CSS)
(function(){ $(document).ready(Setup) function Setup(){ $("#navBarBehandeling").on('click',CheckDropDown); } $("#navBarBehandeling").on('click',CheckDropDown); function CheckDropDown(){ var t = $(this); if(t.attr('aria-expanded')=='false'){ $('main').addClass("mt-9"); } else{ $('main').removeClass("mt-9"); } } }()Y aquí está mi css:
.mt-9{ margin-top: 9rem; }y aquí está mi html:
<head> CDN's for Jquery and bootstrap </head> <body> <header> <div id="navBarBehandeling"> navbar with dropdown here></div> </header> <main> <p> blablabla </p> </main> </body>¡Puedes hacer !t.attr('aria-expanded') para que funcione
$("#navBarBehandeling").on('click',CheckDropDown); function CheckDropDown() { var t = $(this); if (!t.attr('aria-expanded')) { console.log('addClass'); $('main').addClass("mt-9"); } else{ console.log('removeClass'); $('main').removeClass("mt-9"); } } .mt-9{ margin-top: 9rem; } <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <header> <div id="navBarBehandeling"> navbar with dropdown here></div> </header> <main> <p> blablabla </p> </main> </body> </html>Utilice el documento listo como este:
$(document).ready(function () { $("#navBarBehandeling").on("click", CheckDropDown); function CheckDropDown() { var t = $(this); if (t.attr("aria-expanded") == "false") { $("main").addClass("mt-9"); } else { $("main").removeClass("mt-9"); } } });