grantsmith
Member
- Local time
- 17:46
- Joined
- Aug 2, 2020
- Messages
- 16
Hi,
I am rewriting a lump of jQuery into vanilla javascript, or at least trying to!
Everything that I require is working as I wish apart from the from toggling an aria-expanded from false to true.
jQuey:
// Hamburger
$(document).ready(function () {
$(".hamburger").click(function () {
$(this).toggleClass("is-active");
$("body").toggleClass("noscroll");
$(this).attr("aria-expanded", function (i, attr) {
return attr == "true" ? "false" : "true";
});
});
});
// Display Mobile Menu
$(document).ready(function () {
// Check for click events on the navbar burger icon
$(".hamburger").click(function () {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".nav").toggleClass("is-active");
$(".navbar_menu-end").toggleClass("is-active");
});
});
JavaScript:
// Hamburger Menu
document.addEventListener("DOMContentLoaded", function (event) {
function menuClass() {
// Look to menu Classes
var mobileBtn = document.querySelector(".hamburger");
var mobileNav = document.querySelector('.nav');
//Toggle the various states
mobileBtn.classList.toggle("is-active");
mobileNav.classList.toggle('is-active');
// Toggle attribute
mobileBtn.toggleAttribute("aria-expanded", function (i, attr) {
return attr == "true" ? "false" : "true";
});
}
// Load the window function
window.onload = function () {
// Listen for events
document.querySelector(".hamburger").addEventListener("click", menuClass);
document.querySelector('.nav').addEventListener('click', menuClass);
};
});
Not sure what I have misunderstood?