javascript - 两个功能相互干扰

Question

因此，我在 Web 开发方面的第一次尝试进展得合理。但是...我想有两个单独的下拉菜单，但是JavaScript函数相互干扰...也就是说，如果两个功能同时处于事件状态，则单击一个下拉菜单将导致另一个下拉菜单作出 react 或停止工作。这可能是非常愚蠢的事情，但我没有多少时间了。这是代码:

//Control sliding menu on screens smaller than a specified breakpoint.
(function(menu_button, links, breakpoint) 
{
    "use strict";
    var menulink = document.getElementById(menu_button),
    menu = document.getElementById(links);

    menu.className = "start";
    setTimeout(function() 
    {
        menu.className = "collapsed";
    }, 20);

    menuLink.onclick = function() 
    {
        if (menu.className === "displayed") 
        {
            menu.className = "collapsed";
        } 
        else 
        {
            menu.className = "displayed";
        }
        return false;
    };

    window.onresize = function() 
    {
        if (window.innerWidth < breakpoint) 
        {
            menu.className = "collapsed";
        }
    };  
})("menuLink", "navLinks", 700);

那是 1 号功能，这是 2 号功能:

function dropFunction() 
{
    "use strict";
    document.getElementById("myDropdown").classList.toggle("drop");
}

window.onclick = function(e) 
{
    "use strict";
    if (!e.target.matches('.dropbtn')) 
    {

        var dropdowns = document.getElementsByClassName("dropdownContent");
        for (var d = 0; d < dropdowns.length; d++) 
        {
            var openDropdown = dropdowns[d];
            if (openDropdown.classList.contains("drop")) 
            {
                openDropdown.classList.remove("drop");
            }
        }
    }
}

和 HTML(如果有的话):

<nav>
    <p id="menuLink"><a href="#navLinks">MENU</a></p>
    <ul class="displayed" id="navLinks">
        <li><a href="index.html">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

<div class="dropdownContent" id="myDropdown">
    <a href="#"><img class="externalLink" src="images/faceBook.png" style="width:20px"></a>
    <a href="#"><img class="externalLink" src="images/linkedIn.png" style="width:20px"></a>
    <a href="#"><img class="externalLink" src="images/soundCloud.png" style="width:20px"></a>
</div>

和 CSS:

.nav
{
    display: inline;
    position: absolute;
    bottom: 220px;
    padding-right: 60px;
    width: 100%;
    background-color: transparent;
    font-family: "verdana";
    font-size: 20px;
    text-align: center;
}

.nav li
{
    display: inline;
}

.nav a
{
    display: inline-block;
    padding: 50px;
    text-decoration: none;
    color: #E4E4E4;
}

.nav a:hover
{
    color: #FFFFFF;
    text-shadow: 0px 0px 15px #FFFFFF;
}

.nav a:active
{
    color: #5B4CA8;
}

li.drops
{
    display: inline-block;
}

.dropdownContent 
{
    display: none;
    position: absolute;
    background-color: transparent;
    box-shadow: none;
    minimum-width: 20px;
}

.dropdownContent a 
{
    color: transparent;
    text-decoration: none;
    display: block;
    text-align: center;
}

.drop
{
    display: block;
}

#menuLink 
{
    width: 100%;
    background-color: transparent;
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

#menuLink a
{
    text-decoration: none;
    font-family: "helvetica";
    color: #E4E4E4;
}

#menuLink a:hover
{
    color: #FFFFFF;
    text-shadow: 0px 0px 15px #FFFFFF;
}

#menuLink a:active
{
   color: #5B4CA8;
}

#navLinks
{
    position: absolute;
    list-style-type: none;
    width: 100%;
    background-color: transparent;
    padding: 0;
    margin: 0;
    text-align: center;
    z-index: 1;
    opacity: 1;
    -webkit-transition: all ease-out 0.5s;
    transition: all ease-out 0.5s;
}

#navLinks a
{
    display: block;
    padding: 10px;
    font-family: "helvetica";
    color: #E4E4E4;
    text-decoration: none;
    font-size: 18px;
}

#navLinks a:hover
{
    color: #FFFFFF;
    text-shadow: 0px 0px 15px #FFFFFF;
}

#navLinks a:active
{
    color: #5B4CA8;
}

#navLinks.start
{
    display: none;
}

#navLinks.collapsed
{
    top: -12em;
    opacity: 0;
}

感谢您的帮助!

Answer 1

您已经使用 window.Onlcick 事件指定了当用户没有点击类为“drop”的东西时下拉菜单的行为。如果您单击该窗口中的任何元素，就会触发此事件，因为事件会像 JavaScript 中那样冒泡。