Why Javascript Sublevel menu is not working properly-CodePudding

Can anyone check the issue with my basic multilevel navigation. In my menu, when i click on "About" it working properly. But when i click on "Profile" under About menu, it is not working due to JS is assigning a "display:none" to it's sublevel menu. Can anyone explain me whats wrong with my code. I thinked on the perspective of even bubbling, but eventhough my code should work as per the order of Parent and child. Can anyone help me on this. Thanks in Advance!

let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item) => {
  if (item.parentElement.querySelector("ul")) {
    item.parentElement.classList.add("has-submenu");
  }
});

let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item) => {
  item.addEventListener("click", (e) => {
    e.preventDefault();

    let ul = e.target.parentElement.querySelector("ul");
    let cs = window.getComputedStyle(ul).display;
    if (cs === "none") {
      ul.style.cssText = "display:block";
    } else {
      ul.style.cssText = "display:none";
    }

  });
});

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: arial;
}

.main-navigation ul li {
  padding: .35rem;
  background: #f9f9f9;
}

.main-navigation ul li ul {
  padding-left: 1rem;
  display: none;
}

.main-navigation ul li a {
  display: block;
  text-decoration: none;
}

<div class="main-navigation">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About  </a>
      <ul>
        <li><a href="">Profile  </a>
          <ul>
            <li><a href="">History</a></li>
            <li><a href="">Management</a></li>
          </ul>
        </li>
        <li><a href="">Vision</a></li>
        <li><a href="">Mission</a></li>
      </ul>
    </li>
    <li><a href="">Services  </a>
      <ul>
        <li><a href="">Web Design</a></li>
        <li><a href="">Web Development</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</div>

CodePudding user response：

This is just because your event propagates(when has-submenu container is clicked) as the profile tab is within another submenu. Just try adding a console log inside the event listener. you could see it getting triggered twice. I have added a stopPropagation() method. This whole code can be improved a bit and I leave it to you. As @mplungjan suggested event delegation is the right way to do this.

let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item) => {
  if (item.parentElement.querySelector("ul")) {
    item.parentElement.classList.add("has-submenu");
  }
});

let mn = document.querySelector(".main-navigation");
mn.addEventListener("click", () => {
  <!-- alert("I'm main navigation and now i'm clicked"); -->
})

let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item) => {
  item.addEventListener("click", (e) => {
    e.preventDefault();
    e.stopPropagation();
    let ul = e.target.parentElement.querySelector("ul");
    let cs = window.getComputedStyle(ul).display;
    if (cs === "none") {
      ul.style.cssText = "display:block";
    } else {
      ul.style.cssText = "display:none";
    }

  });
});

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: arial;
}

.main-navigation ul li {
  padding: .35rem;
  background: #f9f9f9;
}

.main-navigation ul li ul {
  padding-left: 1rem;
  display: none;
}

.main-navigation ul li a {
  display: block;
  text-decoration: none;
}

<div class="main-navigation">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About  </a>
      <ul>
        <li><a href="">Profile  </a>
          <ul>
            <li><a href="">History</a></li>
            <li><a href="">Management</a></li>
          </ul>
        </li>
        <li><a href="">Vision</a></li>
        <li><a href="">Mission</a></li>
      </ul>
    </li>
    <li><a href="">Services  </a>
      <ul>
        <li><a href="">Web Design</a></li>
        <li><a href="">Web Development</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</div>