Monday, December 4, 2023
 Popular · Latest · Hot · Upcoming
38
rated 0 times [  39] [ 1]  / answers: 1 / hits: 5905  / 2 Years ago, thu, august 26, 2021, 12:00:00

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


   <ul class="navbar">
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li><a href="#">clicked</a></li>
<li><a href="#">clicked</a></li>
<li><a href="#">clicked</a></li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li><a href="#">clicked</a></li>
<li><a href="#">clicked</a></li>
<li><a href="#">clicked</a></li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li><a href="#">clicked</a></li>
<li><a href="#">clicked</a></li>
<li><a href="#">clicked</a></li>
</ul>
</li>
</ul>

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?


More From » html

 Answers
9

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


The algorithm is quite simple:



  1. Add listener on the parent element

  2. On click check if dropdown-opener was clicked

  3. Get drop-down which I need to open

  4. Close other dropdowns

  5. 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;
}

   <ul class=navbar>
<li class=nav-menu>
<div class=dropdown>click</div>
<ul class=navbar__items>
<li><a href=#>clicked</a></li>
<li><a href=#>clicked</a></li>
<li><a href=#>clicked</a></li>
</ul>
</li>
<li class=nav-menu>
<div class=dropdown>click</div>
<ul class=navbar__items>
<li><a href=#>clicked</a></li>
<li><a href=#>clicked</a></li>
<li><a href=#>clicked</a></li>
</ul>
</li>
<li class=nav-menu>
<div class=dropdown>click</div>
<ul class=navbar__items>
<li><a href=#>clicked</a></li>
<li><a href=#>clicked</a></li>
<li><a href=#>clicked</a></li>
</ul>
</li>
</ul>




[#963] Sunday, August 15, 2021, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
luzv

Total Points: 178
Total Questions: 105
Total Answers: 114

Location: Palau
Member since Tue, May 30, 2023
7 Months ago
luzv questions
Mon, Nov 23, 20, 00:00, 3 Years ago
Thu, Jun 11, 20, 00:00, 4 Years ago
Wed, Apr 29, 20, 00:00, 4 Years ago
Sun, Apr 26, 20, 00:00, 4 Years ago
;