我以前从未尝试过Javascript，环顾四周，但我发现的教程会花我几周的时间来弄清楚(注意力/焦点问题+我甚至不知道我想搜索什么词)，我搜索的解决方案都没有解决它，我不知道足够从其他答案中推断出来。
有人能给我这个代码的一个例子(从w3School)扩展到也切换更多的下拉菜单?它必须像这个键盘一样可以使用。
目前它只处理ID为" dropperson "并且可以打开个人菜单，我需要"openmenu";函数也对ID "dropsites"并能够打开其他网站菜单。需要注意的是，按钮和受影响的iddiv是兄弟关系。
请不要使用JQuery。
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>
.dropopen css类所做的只是将。dropdown-content的显示从none变为block。
我试着搜索我的具体问题，所有我发现的方法都超出了我的理解能力，"使用jquery";(我受限于不能使用JQuery)，或者"使用其他代码"(对我的代码不起作用)。
如果我只是复制整个东西并为每个菜单创建一个函数，它就可以工作，但我觉得这有点糟糕的意大利面条编码，如果没有一个可以学习的例子，我无法自己压缩它。
如果你能帮我解决这个问题，我将非常感激，这样我以后就可以使用它了，如果你能解释一下你是如何做到的，或者链接到文档的特定部分，解释你在使用什么，我将更加感激。
如果你想一键切换所有的下拉菜单，使用querySelectors来获取所有的下拉菜单，并像这样切换它们:
const dropdownMenus = document.querySelectorAll(".dropdown-content")
for(const menu of dropdownMenus){
menu.classList.toggle("dropopen")
}
但是如果你想用相同的函数来切换它们，而不是为每个菜单写一个函数，你可以这样做:
JS:
function openMenu(id) {
document.getElementById(id).classList.toggle("dropopen");
}