두 가지 기능이 서로 간섭합니다

Question

웹 개발에서의 첫 스탭이 이라고 합리적으로입니다. 그러나 두 개의 분리 된 드롭 다운 메뉴를 갖기를 원하지만 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); 

, 여기에 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

사용자가 "drop"클래스로 무언가를 클릭하지 않은 경우 window.Onlcick 이벤트를 사용하여 드롭 다운에 대한 동작을 지정했습니다. 이 이벤트는 자바 스크립트에서 이벤트가 거품처럼 나타나기 때문에 해당 윈도우의 항목을 클릭하면 시작됩니다.