How to make JS code accept multiple similar IDs-CodePudding

I have the JS code below that I use with the form after it. However, it only calls the first dropdown and ignores the rest. The dropdown are generated by Hugo (SSG) and I all share the same ID/class in the menu. I need help to make the code work for multiple dropdown menus.


 document.getElementById("dropbtn").addEventListener('click', function() { 
  document.getElementById("sub-menu").classList.toggle("show");
  var x = document.getElementById("dropbtn").getAttribute("aria-expanded"); 
  if (x == "true") 
  {
  x = "false"
  } else {
  x = "true"
  }
  document.getElementById("dropbtn").setAttribute("aria-expanded", x);
});
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("sub-menu");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

<nav>
           <ul>
             <li  id="dropdown">
              <a id="dropbtn"  href="#" aria-expanded="false">Toggle<span  for="toggle">▾</span></a>
              <ul id="sub-menu" >
                <li>
                  <a href="/a/">A</a>
                </li>
                <li>
                  <a href="/b/">B</a>
                </li>
                <li>
                  <a href="/c/" >C</a>
                </li>
              </ul>
             </li>
             <li  id="dropdown">
              <a id="dropbtn"  href="#" aria-expanded="false">Dropdown <span  for="dropdown">▾</span></a>
              <ul id="sub-menu" >
                <li>
                  <a href="/d/">D</a>
                </li>
                <li>
                  <a href="/e/">E</a>
                </li>
                <li>
                  <a href="/f/">F</a>
                </li>
              </ul>
             </li>
           </ul>
        </nav>

CodePudding user response：

It's not reccomended to use multiple id's with the same name. Here's my solution for your case.

<nav>
  <ul>
    <li >
      <a  aria-expanded="false" href="#">Toggle<span >▾</span></a>
      <ul >
        <li>
          <a href="/a/">A</a>
        </li>
        <li>
          <a href="/b/">B</a>
        </li>
        <li>
          <a href="/c/">C</a>
        </li>
      </ul>
    </li>
    <li >
      <a  aria-expanded="false" href="#">Dropdown <span >▾</span></a>
      <ul >
        <li>
          <a href="/d/">D</a>
        </li>
        <li>
          <a href="/e/">E</a>
        </li>
        <li>
          <a href="/f/">F</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<script>
  let dropbtns = document.getElementsByClassName('dropbtn');
  for (let dropbtn of dropbtns) {
    dropbtn.onclick = () => {
      dropbtn.nextElementSibling.classList.toggle('show');
      let expanded = dropbtn.getAttribute('aria-expanded');
      dropbtn.setAttribute('aria-expanded', expanded == 'true' ? 'false' : 'true');
    };
  }
  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function (event) {
    if (!event.target.matches('.dropbtn')) {
      let dropbtns = document.getElementsByClassName('dropbtn');
      for (let dropbtn of dropbtns) {
        dropbtn.nextElementSibling.classList.remove('show');
        dropbtn.setAttribute('aria-expanded', 'false');
      }
    }
  };
</script>

CodePudding user response：

So, first of all. There can only be one unique ID per page, so your HTML is now invalid. You will have to have different IDs on your HTML elements (if you still need them at all). Below JS hopefully should work.

const dropdownTriggers = document.querySelectorAll('.dropbtn');

[...dropdownTriggers].forEach((trigger) => {
  trigger.addEventListener('click', (e) => {
    const triggerClicked = e.target;
    const dropdownMenu = triggerClicked.nextElementSibling;
    const isDropdownShown = Boolean(triggerClicked.getAttribute('aria-expanded'));
    dropdownMenu.classList.toggle('show', !isDropdownShown);
    triggerClicked.setAttribute('aria-expanded', isDropdownShown);
  })
})

document.addEventListener('click', (e) => {
  if (!event.target.matches('.dropbtn')) {
    [...dropdownTriggers].forEach((trigger) => {
      const dropdownMenu = trigger.nextElementSibling;
      dropdownMenu.classList.toggle('show', false);
      trigger.setAttribute('aria-expanded', false);
    })
  }
});