Refactor navigation toggle function

This commit is contained in:
Helen Chong 2024-06-08 00:36:30 +08:00
parent 4ef8ebd499
commit 5117609be4
1 changed files with 16 additions and 9 deletions

View File

@ -91,15 +91,22 @@
<script defer> <script defer>
const navbarToggle = document.querySelector('.navbar__toggle'); const navbarToggle = document.querySelector('.navbar__toggle');
const navbarLinks = document.querySelector(".navbar__links"); const navbarLinks = document.querySelector(".navbar__links");
const navbarLinkItems = document.querySelectorAll(".navbar__links li a");
navbarToggle.addEventListener('click', () => { const openNavigation = () => {
const showClass = "navbar__links--show"; navbarLinks.classList.add("navbar__links--show");
navbarLinks.classList.toggle(showClass); navbarToggle.ariaExpanded = "true";
};
if (navbarToggle.ariaExpanded === "false") { const closeNavigation = () => {
navbarToggle.ariaExpanded = "true"; navbarLinks.classList.remove("navbar__links--show");
} else { navbarToggle.ariaExpanded = "false";
navbarToggle.ariaExpanded = "false"; };
}
}); const toggleNavigation = () => {
const open = navbarToggle.getAttribute("aria-expanded");
open === "false" ? openNavigation() : closeNavigation();
}
navbarToggle.addEventListener('click', toggleNavigation);
</script> </script>