Javascript 如何在多个元素上重用下拉函数或类？

我从w3schools那里学到了一个很棒的下拉功能，除了我现在需要在更多的元素（按钮）上使用它之外，它工作得非常好。有没有一种方法可以重用函数来完成这个任务，或者这是一个类的工作

以下是html：

<div class="dropdown">
  <button onclick="myFunction()" class="gravatar">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Profile</a>
    <a href="#">Settings</a>
    <a href="#">Log out</a>
  </div>
</div>

这就是功能：

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.gravatar')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
} 

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉菜单外单击，请关闭下拉菜单
window.onclick=函数（事件）{
如果（！event.target.matches（'.gravatar'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

调用函数时，只需给出函数参数即可

<div class="dropdown">
 <button onclick="myFunction('myDropdown')"
 class="gravatar">Dropdown</button>
 <div id="myDropdown" class="dropdown-content">
 <a href="#">Profile</a>
 <a href="#">Settings</a>
 <a href="#">Log out</a>
</div>




function myFunction(idOfTheDiv) {
    document.getElementById(idOfTheDiv).classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.gravatar')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

下拉列表
函数myFunction（idOfTheDiv）{
document.getElementById（idOfTheDiv）.classList.toggle（“显示”）；
}
//如果用户在下拉菜单外单击，请关闭下拉菜单
window.onclick=函数（事件）{
如果（！event.target.matches（'.gravatar'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

调用函数时，只需给出函数参数即可

<div class="dropdown">
 <button onclick="myFunction('myDropdown')"
 class="gravatar">Dropdown</button>
 <div id="myDropdown" class="dropdown-content">
 <a href="#">Profile</a>
 <a href="#">Settings</a>
 <a href="#">Log out</a>
</div>




function myFunction(idOfTheDiv) {
    document.getElementById(idOfTheDiv).classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.gravatar')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

下拉列表
函数myFunction（idOfTheDiv）{
document.getElementById（idOfTheDiv）.classList.toggle（“显示”）；
}
//如果用户在下拉菜单外单击，请关闭下拉菜单
window.onclick=函数（事件）{
如果（！event.target.matches（'.gravatar'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

class-eltoggle{
建造师（a、b）{
this.a=document.getElementById（a）；
这个.b=b；
}
获取切换（）{
if（this.b==='show'）{
this.a.classList.toggle（'hide'）；
}否则{
this.a.classList.add（'hide'）；
}
}
设置在外部（外部）{
这个.b=外部
}
}
var myDropDown=新的elToToggle（“myDropDown”）；
myDropDown.outSide='show'；
myDropDown.toggle
window.onclick=函数（事件）{
var start=event.target.matches（'.gravatar'））
如果（！开始）{
myDropDown.outSide='hide'；
myDropDown.toggle
myDropDown.outSide='show'；
}
}

.show{
显示：块；
}
.隐藏{
显示：无；
}

下拉列表

class-eltoggle{
建造师（a、b）{
this.a=document.getElementById（a）；
这个.b=b；
}
获取切换（）{
if（this.b==='show'）{
this.a.classList.toggle（'hide'）；
}否则{
this.a.classList.add（'hide'）；
}
}
设置在外部（外部）{
这个.b=外部
}
}
var myDropDown=新的elToToggle（“myDropDown”）；
myDropDown.outSide='show'；
myDropDown.toggle
window.onclick=函数（事件）{
var start=event.target.matches（'.gravatar'））
如果（！开始）{
myDropDown.outSide='hide'；
myDropDown.toggle
myDropDown.outSide='show'；
}
}

.show{
显示：块；
}
.隐藏{
显示：无；
}

下拉列表

我是否假设您想要使用可重用类函数？确实，这是真的。我是否假设您想要使用可重用类函数？确实，这是真的。