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可以简化很多。只需将单击的按钮传递给该函数，然后找到它与类dropmenu-content的兄弟姐妹。完成后，您需要做的就是切换show类。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以为您的按钮指定一个数据属性，其中包含您想要影响的下拉列表的ID，以及一个类似＆＃34;触发事件＆＃34;的css类。解雇事件

<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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: