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

Question

我从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> 

这里是CSS：

.show {display:block;} 

这是函数：

/* 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'); 
     } 
    } 
    } 
} 

Answer 1

只是给函数的参数，当你把它

<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'); 
     } 
    } 
    } 
} 

Answer 2

class elToToggle { 
 
    constructor(a, b) { 
 
    this.a = document.getElementById(a); 
 
    this.b = b; 
 
    } 
 
    get toggle() { 
 
    if (this.b === 'show') { 
 

 
     this.a.classList.toggle('hide'); 
 

 
    } else { 
 

 
     this.a.classList.add('hide'); 
 
    } 
 
    } 
 

 
    set outSide(outSide) { 
 
    this.b = outSide 
 
    } 
 
} 
 
var myDropDown = new elToToggle('myDropdown'); 
 
myDropDown.outSide = 'show'; 
 
myDropDown.toggle 
 

 

 
window.onclick = function(event) { 
 
    var start = event.target.matches('.gravatar') 
 
    if (!start) { 
 
    myDropDown.outSide = 'hide'; 
 
    myDropDown.toggle 
 
    myDropDown.outSide = 'show'; 
 

 
    } 
 
}

.show { 
 
    display: block; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<div class="dropdown"> 
 
    <button onclick="myDropDown.toggle" 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>