Question

我有一个网页，当你登录时会检查你是否有alias如果没有，它会显示一个模式，这里有一个下拉列表是代码

<body>
<canvas id="sky"></canvas>
<form class = "col-sm-3 col-md-5 col-wd-8" id="log-in-form">
    <input type="text" placeholder="Enter Domain" name="domain" required="required" />
    <input type="password" placeholder="Enter Password" name="password" required="required" />
    <button id="btn-login" type="submit">Login</button>
    <div id="myModal" class="col-sm-12 modal">
        <div class="col-sm-5 col-md-6 col-wd-7 modal-content">
            <span class="close">&times</span>
            <div class="col-wd-6 dropdown" style="position:relative;left:-10px;">
                <button id="aliasbtn" class="dropbtn" style="text-align:center;">Select your Alias</button>
                  <div id="aliasmenu" class="dropdown-content">
                  </div>
            </div>
            <div class="col-wd-6 dropdown" style="position:relative;left:-16px;">
                <button id="monitobtn" class="dropbtn">Select your Monito</button>
                  <div id="monitomenu" class="dropdown-content">
                  </div>
            </div>
        <br />
        <div id="gotoMain"><p class="proceed">Proceed to Main Menu</p></div>
        </div>
    </div>
</form>

我有一个下拉列表，当您点击外部的下拉按钮时，下拉内容也将关闭，但我的代码无效。我注意到modal不受window.onClick的影响我应该怎么做？这是我的javascript代码。

$("#aliasbtn").on("click", function (e) {
    $('#aliasmenu').toggleClass('show');
    $('#monitomenu').removeClass('show');

});

window.onclick = function (event) {

    if (!$(event.target).hasClass('dropbtn')) {
        console.log("ok");
        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');
            }
        }
    }
}

如果我点击按钮外面，下拉不会关闭

0 个答案: