javascript – 两个功能互相干扰

所以我对网络开发的第一次尝试进展得相当不错.
但是……我希望有两个单独的下拉菜单,但 JavaScript函数互相干扰……也就是说,如果两个函数同时处于活动状态,单击一个下拉菜单将导致另一个下拉菜单反应或停止工作.这可能是一些非常愚蠢的东西,但我没有多少时间了.这是代码：

//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);

这是功能No.1,这里是No.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;
}

谢谢你的帮助！

解决方法

您已使用window.Onlcick事件来指定下拉列表的行为,如果用户没有单击类“drop”的内容.如果您单击该窗口中的任何项目,则会触发此事件,因为事件会像JavaScript中那样冒泡.