The dropdown button is not working Not everyone is working Only one item accepts a javascript event-CodePudding

https://codepen.io/MohamedSamehAhmed/pen/NWMVaEb On the page, I have three buttons to open the drop-down menu, and the problem is that only the first works and the rest does not HTML Code:

 <nav >
       <div >
           <a href="#">Logo</a>
       </div>
       <ul >
           <li><a href="#">Home</a></li>
           <li>
               <a  href="#">Product <i  aria-hidden="true"></i></a>
               <ul >
                   <li ><a href="#">link</a></li>
                   <li ><a href="#">link</a></li>
                   <li ><a href="#">link</a></li>
               </ul>
           </li>
           <li><a href="#">News</a></li>
           <li><a href="#">Tips</a></li>
           <li>
               <a  href="#">About Us <i  aria-hidden="true"></i></a>
               <ul >
                   <li ><a href="#">link</a></li>
                   <li ><a href="#">link</a></li>
                   <li ><a href="#">link</a></li>
               </ul>
           </li>
           <li>
               <a  href="#">Gallery <i  aria-hidden="true"></i></a>
               <ul >
                   <li ><a href="#">link</a></li>
                   <li ><a href="#">link</a></li>
                   <li ><a href="#">link</a></li>
               </ul>
           </li>
           <li><a href="#">Contact Us</a></li>
       </ul>
   </nav>

CSS Code:

:root {
   --greenColor:#409a4d;
   --whiteColor: #ffffff;
   --blackColor:#212121;
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   font-family: "Open Sans";
}
a {
   text-decoration: none;
}

ul {
   list-style: none;
}

/* nav bar */
.nav-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
   background-color: #ffffff;
   -webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
   padding: 14px 20px;
}
.nav-bar .logo a {
   color: var(--greenColor);
   font-weight: 500;
   font-size: 25px;
}
.nav-bar .nav-links {
   display: flex;
   align-items: center;
   gap: 50px;
}
.nav-bar .nav-links li a {
   font-size: 18px;
   font-weight: 400;
   color: var(--blackColor);
   transition:all 3s ease;
   -webkit-transition:all 3s ease;
   -moz-transition:all 3s ease;
   -ms-transition:all 3s ease;
   -o-transition:all 3s ease;
   position: relative;
}
.nav-bar .nav-links li {
   position: relative;
   display: block;
}
.nav-bar .nav-links li .drop-menu {
   display: none;
   position: absolute;
   top: 43px;
   text-align: center;
   filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
   background-color: #ffffff;
   -webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
   animation: drop .3s;
   -webkit-animation: drop .3s;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

.nav-bar .nav-links li .drop-menu.active {
   display: block;
   width: 100%;
   height: 180px;
}
.nav-bar .nav-links li .drop-menu-btn i.rotated {
   transform: rotate(180deg);
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
}
.nav-bar .nav-links li .drop-menu >li {
   margin-bottom: 12px;
}

JS Code: On the page, I have three buttons to open the drop-down menu, and the problem is that only the first works and the rest does not

const dropMenuBtn = document.querySelector('.drop-menu-btn');
const dropMenu = document.querySelector('.drop-menu');
const icon = document.querySelector('.drop-menu-btn i');
dropMenuBtn.addEventListener('click', () => {
    dropMenu.classList.toggle('active')
    icon.classList.toggle('rotated')
});

console.log(dropMenuBtn)

CodePudding user response：

As Richard mentioned, if you're using JQuery this becomes easier as you could use something like:

const dropMenuBtn = document.querySelectorAll('.drop-menu-btn');
$(dropMenuBtn).click(function(){
  $(this).closest("li").find(".drop-menu").toggleClass("active");
});

If you want to stick with pure JavaScript, something like this would work:

const dropMenuBtn = document.querySelectorAll('.drop-menu-btn');
const dropMenu = document.querySelector('.drop-menu');
const icon = document.querySelector('.drop-menu-btn i');
dropMenuBtn.forEach(item => {
  item.addEventListener('click', event => {
    var thisDD = event.target.closest("li").querySelector('.drop-menu');
    if (thisDD.classList.contains("active")) {
      thisDD.classList.remove("active");
    }
    else {
      thisDD.classList.add("active");
    }
  });
});

CodePudding user response：

Welcome!

Since you tagged jQuery, here is a possible solution:

$('.drop-menu-btn').each((i, btn) => {
    $(btn).on('click', () => {
        $(btn).next('.drop-menu').toggle();
    });
});

try it out on codepen