2つの機能が互いに干渉する

Question

私の最初のウェブ開発でのスタブは、と合理的にです。 しかし、私は2つの別々のドロップダウンメニューを持っていますが、JavaScript関数は互いに干渉しています...つまり、両方の機能が同時にアクティブな場合、1つのドロップダウンをクリックすると、反応するか停止するかを決定する。それは多分愚かなものかもしれないが、少し時間が残っている。ここにコードされています

//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のようなイベントが発生するので、そのウィンドウ内のアイテムをクリックすると起動します。