下拉菜單-如何將多個按鈕鏈接到javascript功能

Question

我正在嘗試開發一個下拉菜單。 我已經為兩個按鈕編寫了html代碼和javascript，但是我想知道如何將第二個按鈕鏈接到javascript。 我需要編寫另一個function()嗎？

<div class="dropmenu">
  <button onclick="myFunction()" class="button1" style="background-color:#61117F ;">Dropdown</button>
  <div id="Dropdown1" class="dropmenu-content">
    <a href=" http://www.apple.com/">Apple</a>
    <a href="https://www.google.com/">google</a>
  </div>
</div>

<div class="dropmenu">
  <button onclick="myFunction()" class="button1" style="background-color:#d7791b ;">DropDown2</button>
  <div id="Dropdown2" class="dropmenu-content">
    <a href=" https://www.yahoo.com/">Yahoo</a>
    <a href="https://www.facebook.com/">FB</a>
  </div>
</div>

<script>
  function myFunction() {
      document.getElementById("Dropdown1").classList.toggle("show");
      window.onclick = function(event) {
          if (!event.target.matches('.button1')) {
            var drop = document.getElementsByClassName("dropmenu-content");
            var i;
            for (i = 0; i < drop.length; i++) {
              var Dropdown = drop[i];
              if (Dropdown.classList.contains('show')) {
                Dropdown.classList.remove('show');
              }
            }}}
</script>

Answer 1

您的JavaScript可以大大簡化。 只需將單擊的按鈕傳遞給該函數，然后找到它與class dropmenu-content的同級按鈕即可。 完成后，您所需要做的就是切換show類。

 window.myFunction = function(e) { var dropdown = e.parentNode.getElementsByClassName('dropmenu-content')[0]; dropdown.classList.toggle('show'); } 

 .dropmenu-content { display: none; } .dropmenu-content.show { display: block; } 

 <div class="dropmenu"> <button onclick="myFunction(this);" class="button1" style="background-color:#61117F ;">Dropdown</button> <div id="Dropdown1" class="dropmenu-content"> <a href=" http://www.apple.com/">Apple</a> <a href="https://www.google.com/">google</a> </div> </div> <div class="dropmenu"> <button onclick="myFunction(this);" class="button1" style="background-color:#d7791b ;">DropDown2</button> <div id="Dropdown2" class="dropmenu-content"> <a href=" https://www.yahoo.com/">Yahoo</a> <a href="https://www.facebook.com/">FB</a> </div> </div> 

Answer 2

您可以為按鈕提供一個數據屬性，其中包含您要影響的下拉列表的ID，並使用css類（例如“ trigger-event”）觸發事件

<button data-dropdown="Dropdown1" class="trigger-event" style="...">
...
<button data-dropdown="Dropdown2" class="trigger-event" style="...">

並使用data屬性檢索下拉列表

$(document).on('click', '.trigger-event', function(){
    var dropdownId = $(this).data("dropdown");//or attr("data-dropdown")
    myFunction(dropdownId);
});

function myFunction(dropdownId) {
    document.getElementById(dropdownId).classList.toggle("show");
    window.onclick = function(event) {
    ...
    }
}

Answer 3

 function myFunction(dr){ var vis = document.getElementById(dr).style.display == "block" ? "none" : "block"; document.getElementById(dr).style.display = vis; } 

 .button1{ border:none; border-radius:5px; padding:10px; color:white; margin:5px; } .dropmenu-content{ margin:10px; } .dropmenu-content a{ text-decoration:none; color:brown; box-shadow:1px 1px #ccc; padding:5px; border-left:solid 3px green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropmenu"> <button onclick="myFunction('Dropdown1')" class="button1" style="background-color:#61117F ;">Dropdown1 &#x25BC;</button> <div id="Dropdown1" style='display:none;' class="dropmenu-content"> <a href=" http://www.apple.com/">Apple</a> <a href="https://www.google.com/">google</a> </div> </div> <div class="dropmenu"> <button onclick="myFunction('Dropdown2')" class="button1" style="background-color:#d7791b ;">DropDown2 &#x25BC;</button> <div id="Dropdown2" style='display:none;' class="dropmenu-content"> <a href=" https://www.yahoo.com/">Yahoo</a> <a href="https://www.facebook.com/">FB</a> </div> </div>