The back button does not work in the responsive menu

Question

What I want to do is to return to the previous menu when the return button is clicked, can you help? I'm leaving a link on how to write the code here

const submenutitle = document.querySelector('.submenutitle');

https://codepen.io/tolgagnydnn/pen/abWmMpp

Answer 1

The problem was you had two listeners and the second (the back button) was being overwritten by the first (because the back button is part of the group of listeners from the first set). Essentially, the back button had 2 event listeners on it. I consolidated them. I had to change some of the code, so that it would find the right element to add/remove classes from:

for (const mobilemainmenuitem of mobilemainmenuitems) {
  mobilemainmenuitem.addEventListener("click", (e) => {
    const submenu = e.target;
    if (submenu.classList.contains("btn"))
      submenu
        .closest(".mobilesubmenu")
        .classList.remove("showleft", "showvisibility");
    else
      submenu
        .closest("li")
        .querySelector(".mobilesubmenu")
        .classList.add("showleft", "showvisibility");
  });
}

https://codepen.io/kinglish/pen/OJmRevq?editors=1111