How to show dropdown menu when clicked

Question

js

const navItems = document.querySelectorAll('.navbar__items')
const dropDown = document.querySelectorAll('.dropdown')

dropDown.forEach(element => {
 element.addEventListener('click',()=>{
     {
         navItems.forEach(nav =>{
             nav.classList.toggle('drop')
         })
     }
         
 })
})

HTML

   
  
    click
    
      clicked
      clicked
      clicked
    
  
  
    click
    
      clicked
      clicked
      clicked
    
  
  
    click
    
      clicked
      clicked
      clicked

CSS

   .navbar{
  position: relative;
}

.navbar__items{
  position: absolute;
  display: none;
}

.drop{ 
  display: block;
}

I have a navbar and each of these navbar items have dropdown items. I want to show these dropdown items when I click on the 'dropdown' class. But the problem is when I click on one of them all the dropdowns are visible. How do I show only the list I've clicked on?

user_16676600 · Answer

Enter the below code












  
  
    Clicked
    Clicked
    Clicked

user_1533592 · Answer

Use the event target to get the parentNode, then use the parentNode to query the hidden element as all your elements are grouped in the same parent/child grouping. Also you can set an initial class for hidden, display: none; in each element and add it on click. A forEach loop sets each elements display to none using the hidden class on click.

const navItems = document.querySelectorAll('.navbar__items')
const dropDown =  document.querySelectorAll('.dropdown') 

// callback function that passes in the event => e from your listener
function showDropdown (e){
  // set each navbar__items element display: none using hidden class
  navItems.forEach(el => el.classList.add('hidden'))
  // query the specific .navbar__items in the event.targets group 
  let dd = e.target.parentNode.querySelector('.navbar__items') 
  // remove the hidden class a nd show the dropdown for this event.target
  dd.classList.remove('hidden')  
}

// iterate over the dropdown element 
dropDown.forEach(element => {
  // function showDropdown on click
  element.addEventListener('click', showDropdown)
})

.navbar {
  position: relative;
}

.navbar__items {
  position: absolute;
  left: 75px;
}

.hidden {  
  display: none;
}


  
    click
    
      clicked 1
      clicked 1
      clicked 1
    
  
  
    click
    
      clicked 2
      clicked 2
      clicked 2
    
  
  
    click
    
      clicked 3
      clicked 3
      clicked 3

user_16752963 · Answer

As mentioned in comments it is better to use Event Delegation technique.

The algorithm is quite simple:

Add listener on the parent element
On click check if dropdown-opener was clicked
Get drop-down which I need to open
Close other dropdowns
Open dropdown from 3.

const allDropdowns = document.querySelectorAll('.navbar__items')
const DROP_CLASS = 'drop';
const navbar = document.querySelector('.navbar');


navbar.addEventListener('click', ({target}) => {
    if (!target.classList.contains('dropdown')) return;
  
  const parent = target.parentNode;
  const navItems = parent
    .querySelector('.navbar__items');

  allDropdowns.forEach(el => el !== navItems && el.classList.remove(DROP_CLASS));
  
  if (navItems) {
    navItems.classList.toggle(DROP_CLASS);  
  }
});

.navbar{
  position: relative;
}

.navbar__items{
  position: absolute;
  left: 80px;
  display: none;
}

.drop{ 
  display: block;
}

   
  
    click
    
      clicked
      clicked
      clicked
    
  
  
    click
    
      clicked
      clicked
      clicked
    
  
  
    click
    
      clicked
      clicked
      clicked

user_15928449 · Answer

Rather than using addEventlistener you should add onclick method in html to every drop-down with same method name but change the ul class name with for each drop-down and then pass class name in method and then toggle the drop-down with parameter class name.

For example,

 function onClick(item) {
    if (document.getElementsByClassName(item).classList.contains('hidden')) {
        document.getElementsByClassName('dropdown').classList.remove('hidden');
    }
    if (!document.getElementsByClassName(item)[0].classList.contains('hidden')) {
        document.getElementsByClassName('dropdown').classList.add('hidden');
    }
}


    
        click
        
            clicked
            clicked
            clicked
        
    
    
        click
        
            clicked
            clicked
            clicked
        
    
    
        click
        
            clicked
            clicked
            clicked

How to show dropdown menu when clicked

4 Answers