Javascript 两种功能相互干扰

因此，我在web开发方面的第一次尝试进展得相当顺利。 然而。。。我想有两个单独的下拉菜单，但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);

---

谢谢你的帮助

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

我们需要一个简单的例子。无论如何，“两个功能如何同时激活”？谢谢你的回答！但我不知道用什么来代替它。。。我想我会尝试一下。你可以向任何元素添加事件监听器，就像你向window元素添加了click事件监听器一样。您可以使用诸如GetElementsByCassName（）之类的内容。或者，如果您不局限于普通JavaScript，您可以使用Jquery。

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");
            }
        }
    }
}

<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>

.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;
}