Javascript 我需要帮助简化这个下拉功能_Javascript_Html_Css

Javascript 我需要帮助简化这个下拉功能

javascript html css

Javascript 我需要帮助简化这个下拉功能,javascript,html,css,Javascript,Html,Css,有没有办法进一步简化这个javascript函数？仅仅为了一个下拉菜单就必须输入4个变量似乎有点可笑，而且当我想要有多个按钮时，很难跟踪变量代码如下： <!DOCTYPE html> <html> <head> <style> .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } .dropdown-content { display: none;

有没有办法进一步简化这个javascript函数？仅仅为了一个下拉菜单就必须输入4个变量似乎有点可笑，而且当我想要有多个按钮时，很难跟踪变量

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}

</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button onclick="myFunction('dropdown-content','myDropdown','show','.dropbtn')" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction(dropDownClass,dropDownId,show,dropbtnClass) {
    var dropdowns = document.getElementsByClassName(dropDownClass);
    var i;     
    var openDropdown = dropdowns[i];
document.getElementById(dropDownId).classList.toggle(show);

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches(dropbtnClass)) {
    for (i = 0; i < dropdowns.length; i++) {
      if (openDropdown.classList.contains(show)) {
        openDropdown.classList.remove(show);
      }
    }
  }
}

}
</script>

</body>
</html>


.dropbtn:悬停，.dropbtn:焦点{
背景色：#3e8e41；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
}
.下拉内容a{
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表a:悬停{背景色：#f1f1}
.show{display:block；}
可点击下拉列表
单击按钮打开下拉菜单
下拉列表
/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（dropDownClass、dropDownId、show、dropbtnClass）{
var dropdowns=document.getElementsByClassName（dropDownClass）；
var i；
var openDropdown=下拉列表[i]；
document.getElementById（dropDownId）.classList.toggle（show）；
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
如果（！event.target.matches（dropbtnClass））匹配{
对于（i=0；i

你是说

window.onload=function（）{
var btns=document.queryselectoral（“.dropbtn”）；
对于（var i=0；iAsking用于重构工作代码？->Nope.Vanilla JS（纯JavaScript）