为什么单击时菜单图标不触发？

Question

I have a very basic mobile nav set up to build on the functionality for future projects. This looks like it should be working to me as it's a very basic toggle of the mobile nav using translateX.

Can anyone see an error somewhere that is preventing this from working? Once I have this basic functionality I want to build on it. This is driving me crazy, Thank you for any input.

const mobileNav = document.querySelector(".mobile-nav");
const menuIcon = document.querySelector(".bars");

menuIcon.addEventListener("click", toggleMenu);

function toggleMenu() {
  if (mobileNav.classList.contains(".mobile-nav-visible")) {
    mobileNav.classList.remove(".mobile-nav-visible");
    menuIcon.style.display = "block";
  } else {
    mobileNav.classList.add(".mobile-nav-visible");
  }
}

Answer 1

Here are 2 other ways you can do this

You have to include the "left: 0" property inside your ".mobile-nav-visible" class so it will center the nav. You used "transform:X(100%)" to it so it forces the nav to display outside the screen (100% to the right).

OR

Manipulate the display behavior through the "transform" property. Like this

.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    -webkit-transform: translateX(285%);
    -moz-transform: translateX(285%);
    transform: translateX(285%); // force the nav to display outside the screen
    height: 100vh;
    width: 50%;
    background: #e6e6e6;
    transition: transform 0.3s ease-in-out;
}

.mobile-nav-visible {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%);
}

Answer 2

contains ( and all classList methods ) does not work with css selectors, but with the class name directly. So remove the . from the start of the class names.

So use

function toggleMenu() {
  if (mobileNav.classList.contains("mobile-nav-visible")) {
    mobileNav.classList.remove("mobile-nav-visible");
    menuIcon.style.display = "block";
  } else {
    mobileNav.classList.add("mobile-nav-visible");
  }
}

Answer 3

In the if conditional where you are removing the class, set the display of your movileNav to none and then set it back to block in the else condition.

It will make your menu appear when clicking on the hamburger icon on phone but you will need to write separate css to close the menu as the button gets overlapped by the menu.