How do I make this onClick function work for multiple dropdown menus?-CodePudding

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 >
            <button onclick="openMenu()" >Other Sites</button>
            <div id="dropsites" >
              A link
            </div>
          </div>
          <div >
            <button onclick="openMenu()" >Personal</button>
            <div id="dropperso"  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.

CodePudding user response：

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 >
    <button onclick="openMenu('dropsites')" >Other Sites</button>
    <div id="dropsites" >
      A link
    </div>
  </div>
  <div >
    <button onclick="openMenu('dropperso')" >Personal</button>
    <div id="dropperso"  style="right: 0;">
      A link
      A link
    </div>
  </div>

CodePudding user response：

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

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

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

CodePudding user response：

     <div  data-dropdown>
    <button  data-dropdownBtn>Categories</button>
    <div  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')
  })
}