下拉菜单-如何将多个按钮链接到javascript功能

Question

I am trying to develop a drop down menu. I have written html code and javascript for two buttons, but I am wondering how to link the second button to javascript. Do I need to write another 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

Your JavaScript can be simplified a lot. Just pass the clicked button to the function and then find it's sibling with the class dropmenu-content . After you have that, all you need to do is toggle the show class.

 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

You could give your button a data-attribute with the id of the dropdown you want to affect and a css class of something like "trigger-event" to fire the event

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

and use the data attribute to retrieve the dropdown

$(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>