时间戳

首页 > 解决方案 > 如果在外部点击，则关闭下拉菜单 - 没有 ID

javascript - 如果在外部点击，则关闭下拉菜单 - 没有 ID

问题描述

我正在开发一个具有多个下拉按钮的动态项目，它们不能有 ID，因为它们的数量不是静态的。我制作了一个可以打开的功能-通过单击每个按钮来关闭它们，但是如果您在它们之外单击它们不会关闭，这是必要的。我尝试使用此功能，但它不起作用，并且我无法使用 ID 的动态数量的功能。我希望你能帮助我。谢谢！！

失败的JS函数

window.onclick = function(event) {
if (!event.target.matches('dropdown-list')) {

    var dropdown = document.getElementsByClassName("dropdown-button");
    var i;
    for (i = 0; i < dropdown.length; i++) {
        var x = dropdown[i];
        if (x.classList.contains('show')) {
            x.classList.remove('show');
        } 
    }

}}

我的其余代码

    <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <style>     
        a {
            outline: 0;
            text-decoration: none;
        }
        .dropdown{
        height: auto;
        width: auto;
        display: flex;
        margin-left: 3px;
        flex-direction: column;
        align-items: center;
        vertical-align: middle;
        padding-top: 2px;
        }
        .dropdown-button{
        height: 34px;
        width: 34px;
        border-radius: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        vertical-align: middle;
        justify-content: center;
        }
        .active.dropdown-button{
        background-color: lightgrey;
        }

        .dropdown-dropdown{
        position: relative;
        display: inline-block;
        float: left;
        border-radius: 50%;
        }
        .dropdown-list {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        width: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 18;
        right: 0px;
        overflow: hidden;
        }
        .dropdown-list.show{
        display: inline-flex;
        }

        .dropdown-a {
        height: auto;
        width: auto;
        color: black;
        padding: 8px 20px 8px 15px;
        text-decoration: none;
        display: block;
        vertical-align: middle;
        font-size: 15px;
        white-space: nowrap;
        }
    </style>

</head>


<body>  
<div class="dropdown">
    <div class="dropdown-dropdown">
        <a class="dropdown-button" onclick="OpenCloseDropdown(this);">
            X
        </a>
        <div class="dropdown-list">
            <a href="" class="dropdown-a">
            123</a>
            <a href="" class="dropdown-a">
            ABCD</a>
        </div>
    </div>
</div>
<div class="dropdown">
    <div class="dropdown-dropdown">
        <a class="dropdown-button" onclick="OpenCloseDropdown(this);">
            Y
        </a>
        <div class="dropdown-list">
            <a href="" class="dropdown-a">
            123</a>
            <a href="" class="dropdown-a">
            ABCD</a>
        </div>
    </div>
</div>
<div class="dropdown">
    <div class="dropdown-dropdown">
        <a class="dropdown-button" onclick="OpenCloseDropdown(this);">
            Z
        </a>
        <div class="dropdown-list">
            <a href="" class="dropdown-a">
            123</a>
            <a href="" class="dropdown-a">
            ABCD</a>
        </div>
    </div>
</div>

function OpenCloseDropdown(e) {
    var x = e.parentNode.querySelector('.dropdown-list');
    if (x.classList.contains('show')) {
        x.classList.remove('show');
        e.classList = 'dropdown-button';
    } else {
        x.classList += " show";
        e.classList = 'dropdown-button active';
    }    
}

我有两种点击：第一种是点击按钮，在这种情况下，该按钮将切换显示。第二种是在所有按钮之外单击。

标签： javascripthtmljquerydrop-down-menu

解决方案

推荐阅读