打开下拉菜单，有多种选择点击

Question

当您单击

Press Me

时，会打开一个下拉菜单，当您再次单击它或窗口中的其他任何位置时，它会关闭。

我也想把这个功能加到旁边的

dropdown-arrow

上，这样就可以同步了

我也尝试给予

dropdown-arrow

onclick="myFunction()"

，但没有成功。

function myFunction() {
    document.getElementsByClassName('dropdown-content')[0].classList.toggle('show');
}
// Close dropdown if the user clicks on window
window.onclick = function(event) {
    if (!event.target.matches('#verify-name')) {
        var dropdowns = document.getElementsByClassName('dropdown-content');
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

.buttons {
    display: flex;
    position: relative;
}
#dropdown-arrow {
    height: 20px;
}
.dropdown-content {
    display: none;
    position: absolute;
        padding: 14px; background-color: yellow;
}
.show {
    display: flex;
}

<div class="buttons">
    <div>
        <a id="verify-name" onclick="myFunction()">Press Me</a>
        <img id="dropdown-arrow" src="https://www.svgrepo.com/show/335062/dropdown.svg">

        <div class="dropdown-content">
            <span>Logout</span>
        </div>
    </div>
</div>

Answer 1

将 onclick 事件添加到 HTML 中的下拉箭头中：

<img id="dropdown-arrow" src="https://www.svgrepo.com/show/335062/dropdown.svg" onclick="myFunction()">

修改 window.onclick 函数以检查 verify-name 和 dropdown-arrow:

window.onclick = function(event) {
    if (!event.target.matches('#verify-name') && !event.target.matches('#dropdown-arrow')) {
        var dropdowns = document.getElementsByClassName('dropdown-content');
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
};

完成这些更改后，单击“Press Me”链接或下拉箭头将切换下拉菜单。如果窗口打开，单击窗口上的任何其他位置都会将其关闭。