• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

338
Views
Why Javascript Sublevel menu is not working properly

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>

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error