I have made a dropdown which toggles successfully, but it only seems to pick the first class and when I click the second dropdown it toggles the contents of the first. Is there something I am missing here? Here is my code:

const menuListDropdown = document.querySelectorAll('.menu-block-dropdown');
const menuBlock = document.querySelector('.menu-block');

menuListDropdown.forEach((menuBlockList) => {
  menuBlockList.addEventListener('click', function() {
    menuBlock.classList.toggle('menu-block-active');
  })
})

.menu-block {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  padding: 15px;
  border-radius: 8px;
  position: absolute;
  top: 35px;
  opacity: 0;
  transition: 150ms ease;
}

.menu-block-active {
  transition: 150ms all;
  opacity: 1;
}

.menu-block-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.menu-block-list a {
  color: #444444;
  margin: 0 0 0.25 0;
  padding: 0;
  font-weight: 500;
}

<li >
  <a href="#">Resources</a>
  <div >
    <div >
      <a href="#">Dropdown 1</a>
      <a href="#">Dropdown 2</a>
    </div>
  </div>
</li>
<li >
  <a href="#">Blogs</a>
  <div >
    <div >
      <a href="#">Dropdown 3</a>
      <a href="#">Dropdown 4</a>
    </div>
  </div>
</li>

CodePudding user response：

The problem is, you are selecting just one dropdown. So what need to be done is select the dropdown in respect to the Menu Link you clicked.

See the below I've made changes in JS

const menuListDropdown = document.querySelectorAll('.menu-block-dropdown');

// Not needed
// const menuBlock = document.querySelector('.menu-block');

menuListDropdown.forEach((menuBlockList) => {
  menuBlockList.addEventListener('click', function() {
    // Select the Block within the Target List
    const menuBlock = menuBlockList.querySelector(".menu-block");
    menuBlock.classList.toggle('menu-block-active');
  })
})

.menu-block {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  padding: 15px;
  border-radius: 8px;
  position: absolute;
  top: 35px;
  opacity: 0;
  transition: 150ms ease;
}

.menu-block-active {
  transition: 150ms all;
  opacity: 1;
}

.menu-block-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.menu-block-list a {
  color: #444444;
  margin: 0 0 0.25 0;
  padding: 0;
  font-weight: 500;
}

li {
  display: inline-block;
}

<li >
  <a href="#">Resources</a>
  <div >
    <div >
      <a href="#">Dropdown 1</a>
      <a href="#">Dropdown 2</a>
    </div>
  </div>
</li>
<li >
  <a href="#">Blogs</a>
  <div >
    <div >
      <a href="#">Dropdown 3</a>
      <a href="#">Dropdown 4</a>
    </div>
  </div>
</li>

Edit: Activate just one Dropdown at a time.

In this case, we need access to all the dropdowns Since, we need to update all their active state. So that only the intended Dropdown is Active at once.

const menuListDropdown = document.querySelectorAll('.menu-block-dropdown');
const menuBlocks = document.querySelectorAll('.menu-block');

menuListDropdown.forEach((menuBlockList) => {
  menuBlockList.addEventListener('click', function() {
    menuBlocks.forEach((menuBlock) => {
      // Active the Dropdown if it's the child of the BlockList Element
      if (menuBlockList.contains(menuBlock)) {
        menuBlock.classList.toggle('menu-block-active');
      } else {
        menuBlock.classList.remove('menu-block-active');
      }
    });
  });
});

.menu-block {
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  padding: 15px;
  border-radius: 8px;
  position: absolute;
  top: 35px;
  opacity: 0;
  transition: 150ms ease;
}

.menu-block-active {
  transition: 150ms all;
  opacity: 1;
}

.menu-block-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.menu-block-list a {
  color: #444444;
  margin: 0 0 0.25 0;
  padding: 0;
  font-weight: 500;
}

li {
  display: inline-block;
}

<li >
  <a href="#">Resources</a>
  <div >
    <div >
      <a href="#">Dropdown 1</a>
      <a href="#">Dropdown 2</a>
    </div>
  </div>
</li>
<li >
  <a href="#">Blogs</a>
  <div >
    <div >
      <a href="#">Dropdown 3</a>
      <a href="#">Dropdown 4</a>
    </div>
  </div>
</li>