时间戳

首页 > 解决方案 > 如何使用 Javascript 获取按钮，当用户点击它时，在两个按钮中执行 myFunction

javascript - 如何使用 Javascript 获取按钮，当用户点击它时，在两个按钮中执行 myFunction

问题描述

// Get the button, and when the user clicks on it, execute myFunction
    document.getElementById("myBtn2").onclick = function() {myFunction()};
    document.getElementById("myBtn").onclick = function() {myFunction()};
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
    function myFunction() {
        document.getElementById("myDrop").classList.toggle("show2");
    }
.dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

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

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

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

        .dropdown-content a:hover {background-color: #f1f1f1}

        .show {display:block;}
        .show2 {display:block;}
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
    <button id="myBtn" 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>
<div class="dropdown">
    <button id="myBtn2" class="dropbtn">Dropdown</button>
    <div id="myDrop" class="dropdown-content">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </div>
</div>

上面的代码中有两个导航，我希望每个都单独单击。我尝试使用两个 onclick myFuncition Javascript，但这不起作用。我尝试声明两个 id 并且将单独使用我可以用同样的方式做到这一点。请对此提供帮助。获取按钮，当用户单击它时，执行 myFunction

标签： javascript

解决方案

您不能声明两次相同的函数，但是，您可以在调用函数时使用参数，因此您可以针对具有相同函数结构的不同元素：

document.getElementById("myBtn2").onclick = function() {myFunction("myDropdown", "show")};
document.getElementById("myBtn").onclick = function() {myFunction("myDrop", "show2")};    
function myFunction(MyId, MyClass) {
  document.getElementById(MyId).classList.toggle(MyClass);
}

推荐阅读