zwei Funktionen, die sich gegenseitig stören

Question

So geht meine erste Stichel bei Web-Entwicklung vernünftig gut. Allerdings ... Ich möchte zwei separate Dropdown-Menüs haben, aber die JavaScript-Funktionen stören sich gegenseitig ... Das heißt, wenn beide Funktionen gleichzeitig aktiv sind, wird durch Klicken auf ein Dropdown-Feld das andere fallen gelassen runter reagieren oder aufhören zu arbeiten. Es ist wahrscheinlich etwas massiv dumm, aber ich habe wenig Zeit übrig. hier ist der Code:

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

dieser Funktion No.1 war, ist hier Nr.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"); 
      } 
     } 
    } 
} 

und HTML wenn überhaupt nützlich:

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

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

Vielen Dank für Ihre Hilfe!

Answer 1

Sie haben das window.Onlcick Ereignis angeben Verhaltensweisen für die Dropdown-Menüs, wenn der Benutzer einen Klick auf etwas nicht mit Klasse „drop“ verwendet. Dieses Ereignis wird ausgelöst, wenn Sie auf ein Element in diesem Fenster klicken, da Ereignisse wie in JavaScript auftauchen.