Open submenu after click function using only Javascript

Question

I am creating a dropdown menu that contains three submenus. My challenge right now is being able to open each submenu when I click on an arrow image next to the parent LI. At the moment with my current script, it is only affecting the first parent LI, opening its respective submenu. Yet the other two submenus are not being targeted.

const arrowButton = document.querySelectorAll(".menu-arrow");
const subMenu = document.querySelector(".sub-menu");

arrowButton.forEach((el) =>
  el.addEventListener("click", () => {
    subMenu.classList.toggle("open");
  })
);

.sub-menu {
  display: none;
}

.sub-menu.open {
  display: flex;
  flex-direction: column;
  background-color: $footer-text;
  width: 60vw;
  margin: 0 auto;
  color: $darkblue-headingtext;
  border-radius: 5px;
}

<ul class="nav__links">
  <li class="parent">
    Product
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>Overview</li>
      <li>Pricing</li>
      <li>Marketplace</li>
      <li>Features</li>
      <li>Integrations</li>
    </ul>
  </li>
  <li class="parent">
    Company
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>About</li>
      <li>Team</li>
      <li>Blog</li>
      <li>Careers</li>
    </ul>
  </li>
  <li class="parent">
    Connect
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>Contact</li>
      <li>Newsletter</li>
      <li>LinkedIn</li>
    </ul>
  </li>
</ul>

Preview of what Im building

I would greatly appreciate any tips! Thank you!!

biberman · Accepted Answer · 2021-05-10 16:30:12Z

3

The problem is that you use querySelector which selects only the first found element. But you can use the event itself which is provided through every event listener and get the clicked target with event.target. Then you could simply select the next element with nextElementSibling but perhaps the position of the submenu changes during the development process, so it would be better to select the parent of that target with .parentElement and select the submenu class like you did above with .querySelector(".sub-menu").

Working example:

const arrowButton = document.querySelectorAll(".menu-arrow");

arrowButton.forEach((el) =>
  el.addEventListener("click", (event) => {
    const subMenu = event.target.parentElement.querySelector(".sub-menu");
    subMenu.classList.toggle("open");
  })
);

.sub-menu {
  display: none;
}

.sub-menu.open {
  display: flex;
  flex-direction: column;
  background-color: $footer-text;
  width: 60vw;
  margin: 0 auto;
  color: $darkblue-headingtext;
  border-radius: 5px;
}

<ul class="nav__links">
  <li class="parent">
    Product
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>Overview</li>
      <li>Pricing</li>
      <li>Marketplace</li>
      <li>Features</li>
      <li>Integrations</li>
    </ul>
  </li>
  <li class="parent">
    Company
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>About</li>
      <li>Team</li>
      <li>Blog</li>
      <li>Careers</li>
    </ul>
  </li>
  <li class="parent">
    Connect
    <img class="menu-arrow" src="./images/icon-arrow-dark.svg" alt="arrow" />
    <ul class="sub-menu">
      <li>Contact</li>
      <li>Newsletter</li>
      <li>LinkedIn</li>
    </ul>
  </li>
</ul>

edited May 10, 2021 at 16:30

answered May 10, 2021 at 16:25

biberman

5,7794 gold badges16 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felipe Over a year ago

Biberman, I greatly appreciate your feedback. I learned through your post about .parentElement. Thank you.. thank you..

biberman Over a year ago

If that answers your question you should mark it as accepted (see stackoverflow.com/help/someone-answers).

lissettdm · Accepted Answer · 2021-05-10 16:39:33Z

2

With this line const subMenu = document.querySelector(".sub-menu"); you will get always the first element, that is why the first menu is opened not matter what node was clicked. You need to get the submenu node next to the clicked element:

arrowButton.forEach((el) =>
  el.addEventListener("click", () => {
    const subMenu = el.parentNode.querySelector(".sub-menu");
    subMenu.classList.toggle("open");
  })
);

edited May 10, 2021 at 16:39

answered May 10, 2021 at 16:18

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Comments

Mohammad Mohammadi · Accepted Answer · 2021-05-10 16:26:31Z

1

const arrowButton = document.querySelectorAll(".menu-arrow");

arrowButton.forEach((el) =>
  el.addEventListener("click", (e) => {
    e.target.nextElementSibling.classList.toggle("open");
  })
);

edited May 10, 2021 at 16:26

answered May 10, 2021 at 16:19

Mohammad Mohammadi

3054 silver badges11 bronze badges

1 Comment

Mohammad Mohammadi Over a year ago

you're welcome my friend. please accept my answer and vote me <3 .

Collectives™ on Stack Overflow

Open submenu after click function using only Javascript

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related