如何使这个 onClick function 用于多个下拉菜单？

Question

I've never tried Javascript before and looked around, but the tutorials I've found would take me weeks to figure out (attention/focus issues + I don't even know what words I want to search for) and none of the solutions I've searched for solved it, and I don't know enough to extrapolate it from other answers.

Can someone give me an example of this code (from w3School) extended to also toggle more dropdown menus? It has to be usable with keyboard like this one is.

Currently it's only handling the menu with an ID of "dropperso" and can open the Personal menu, I need the "openMenu" function to also react to the ID "dropsites" and be able to open the Other Sites menu. A note that the button and affected ID-having div are siblings.

No JQuery please.

JS:

function openMenu() {
  document.getElementById("dropperso").classList.toggle("dropopen");
}

HTML:

          <div class="dropdown">
            <button onclick="openMenu()" class="drophover">Other Sites</button>
            <div id="dropsites" class="dropdown-content">
              A link
            </div>
          </div>
          <div class="dropdown">
            <button onclick="openMenu()" class="drophover">Personal</button>
            <div id="dropperso" class="dropdown-content" style="right: 0;">
              A link
              A link
            </div>
          </div>

All that the.dropopen css class does is change the display of.dropdown-content from none to block.

I tried to search for my specific problem and all I found was either way beyond my ability to understand, "use JQuery" (I'm limited and can't use JQuery), or "use this other code (that doesn't work for mine)".

It works if I just copy the whole thing and make one function for each menu, but I get the feeling that's kinda bad spaghetti coding, and I can't compress this on my own without an example that works to learn from.

I'd be VERY grateful if you could solve that for me so I can use that later, and even MORE grateful if you could either explain how you made it work or link to the specific parts of documentation that explain what you're using.

Answer 1

function openMenu(id) {
  document.getElementById(id).classList.toggle("dropopen");
}

<button onclick="openMenu('dropsites')" class="drophover">Personal</button>

<button onclick="openMenu('dropperso')" class="drophover">Personal</button>

Answer 2

If you want to toggle them all with one click use querySelectors to get all the dropdown menus and toggle each of them like this:

const dropdownMenus = document.querySelectorAll(".dropdown-content")

for(const menu of dropdownMenus){
   menu.classList.toggle("dropopen")
}

but if you want to toggle each of them with same function and not writing a function for each menu you can do like this:

JS :

function openMenu(id) {
  document.getElementById(id).classList.toggle("dropopen");
}

HTML :

  <div class="dropdown">
    <button onclick="openMenu('dropsites')" class="drophover">Other Sites</button>
    <div id="dropsites" class="dropdown-content">
      A link
    </div>
  </div>
  <div class="dropdown">
    <button onclick="openMenu('dropperso')" class="drophover">Personal</button>
    <div id="dropperso" class="dropdown-content" style="right: 0;">
      A link
      A link
    </div>
  </div>

Answer 3

     <div class="drop-down flex-row-AI-center" data-dropdown>
    <button class="drop-btn" data-dropdownBtn>Categories</button>
    <div class="dropdown-content flex-col" data-dropdown-content>
      <a href="#action">Action </a>
      <a href="#adventure">Adventure</a>
      <a href="#anime">Anime</a>
      <a href="#comedy">Comedy</a>
      <a href="#thriller">Thriller</a>
      <a href="#fantasy">Fantasy</a>
    </div>
  </div>
</div>

You have to give all the dropdown same ids/class/dataset-attributes

 function toggleDropDown(e) {
const isDropdownBtn = e.target.matches('[data-dropdownBtn]');

//as long as user clicking inside of dropdown it won't close
if (!isDropdownBtn && e.target.closest('[data-dropdown]') != null) return;

let currDropdown;

if (isDropdownBtn) {
currDropdown = e.target.closest('[data-dropdown]');
currDropdown.classList.add('active');
}

document.querySelectorAll('[data-dropdown-content].active').forEach(dropdowm => {
if(currDropdown === dropdowm) return
dropdowm.classList.remove('active')
  })
}