clickble dropdown responsive with js-CodePudding

im having trouble with the js in this code. I have 2 clickble dropdowns, but only one of them (the first dropdown) is working. I dont know how to fix it. here's the html part:

<div id="wrap">
<nav>
<div >
<img src="./photos-docs/ME-marine-logo.png" alt="logo"  />
</div>

<button type="button"  data-action="nav-toggle">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>

<ul >
<li ><a href="index.html">עמוד ראשי</a></li>
<li >
<a href="#" data-action="dropdown-toggle">עיסויים </a>
<div >
<a  href="#">רפואי</a>
<a  href="#">שוודי</a>
<a  href="#">רקמות עמוקות</a>
<a  href="#">ניקוז לימפטי</a>
<a  href="#">אבנים חמות</a>
</div>
</li>
<li >
<a href="#" data-action="dropdown-toggle">טיפולי פנים </a>
<div >
<a  href="#">קלאסי</a>
<a  href="#">יופי</a>
<a  href="#">אקנה</a>
<a  href="#">פילינג</a>
<a  href="#">מיצוק</a>
<a  href="#">פיגמנטציה</a>
<a  href="#">אנטי אייג׳ינג</a>
</div>
</li>
<li ><a href="#">מזותרפיה</a></li>
<li ><a href="#">מיקרובליידינג</a></li>
<li ><a href="#">הזמינו תור</a></li>
<li ><a href="#">צרו קשר</a></li>
<li ><a href="tel: 972547809308">0547809308</a></li>
<li ><a href="https://api.whatsapp.com/send?phone=972547809308"><i ></i></a>
</li>

and here's the js part:

let nav = document.querySelector('nav');
let dropdown = nav.querySelector('.dropdown');
let dropdownToggle = nav.querySelector("[data-action='dropdown-toggle']");
let navToggle = nav.querySelector("[data-action='nav-toggle']");

dropdownToggle.addEventListener('click', () => {
if (dropdown.classList.contains('show')) {
dropdown.classList.remove('show');
} else {
dropdown.classList.add('show');
}
})

navToggle.addEventListener('click', () => {
if (nav.classList.contains('opened')) {
nav.classList.remove('opened');
} else {
nav.classList.add('opened');
}
})

what should I do from here? I know the problem ia in the js but I dont know how to keep going from here, im stuck.

CodePudding user response：

In your code, you are using the querySelector method to select a single .dropdown element, which is why only the first dropdown is working.

You need to use the querySelectorAll method instead, which will return a list of all elements that match the given selector. You can then loop through this list and add the click event listener to each dropdown menu.

let nav = document.querySelector('nav');
let dropdowns = nav.querySelectorAll('.dropdown');
let dropdownToggles = nav.querySelectorAll("[data-action='dropdown-toggle']");
let navToggle = nav.querySelector("[data-action='nav-toggle']");

dropdownToggles.forEach(function(toggle, index) {
  toggle.addEventListener('click', function() {
    let dropdown = dropdowns[index];
    if (dropdown.classList.contains('show')) {
      dropdown.classList.remove('show');
    } else {
      dropdown.classList.add('show');
    }
  });
});

navToggle.addEventListener('click', () => {
  if (nav.classList.contains('opened')) {
    nav.classList.remove('opened');
  } else {
    nav.classList.add('opened');
  }
});

CodePudding user response：

Problem is here

let dropdown = nav.querySelector('.dropdown');

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

querySelector() returns only first element that matches the specified selector! Thats why only one dropdown works.

You should use https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

And loop through every element to add event listener to them - just like you did in your code.