我需要帮助来简化此下拉功能

Question

Is there a way to simplify this javascript function any further? 有没有办法进一步简化此javascript函数？ Having to input 4 variables just for a drop-down menu seems a bit ridiculous, and it is hard to keep track of the variables when I want to have more than 1 button. 仅为下拉菜单输入4个变量似乎有点荒谬，并且当我想拥有多个按钮时，很难跟踪变量。

Here is the code: 这是代码：

<!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>

Answer 1

Do you mean 你的意思是

 window.onload=function() { var btns = document.querySelectorAll(".dropbtn"); for (var i=0;i<btns.length;i++) { btns[i].onclick=function() { document.getElementById(this.getAttribute("data-drop")).classList.toggle("show"); } } }

 .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; }

 <h2>Clickable Dropdown</h2> <p>Click on the button to open the dropdown menu.</p> <div class="dropdown"> <button data-drop="myDropdown1" class="dropbtn">Dropdown</button> <div id="myDropdown1" class="dropdown-content"> <a href="#home">Home 1</a> <a href="#about">About 1</a> <a href="#contact">Contact 1</a> </div> <button data-drop="myDropdown2" class="dropbtn">Dropdown</button> <div id="myDropdown2" class="dropdown-content"> <a href="#home">Home 2</a> <a href="#about">About 2</a> <a href="#contact">Contact 2</a> </div> </div>

我需要帮助来简化此下拉功能

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-01-07 08:59:54

我需要帮助来简化此下拉功能

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-01-07 08:59:54

解决方案1
2 已采纳 2016-01-07 08:59:54