다른 드롭 다운을 선택하면 드롭 다운을 닫습니다.

Question

다른 드롭 다운을 선택한 경우 열린 드롭 다운을 숨길 JavaScript 코드를 어떻게 수정할 수 있습니까? 원래 코드는 W3.CSS 문서에서 나온 것이지만 수정 방법은 확실하지 않습니다. 나는 w3-show을 w3-hide으로 대체하려고 시도했지만, JavaScript 내에서 클래스를 제거하고 추가하려고 시도했지만 아무 것도 트릭을 수행하지 않는 것으로 보입니다.

// Used to toggle the menu on small screens when clicking on the menu button 
 
function myFunction() { 
 
    var x = document.getElementById("mySidebar"); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
    x.className += " w3-show"; 
 
    $('body').addClass("fixedPosition"); /* prevents page from scrolling when mobile navbar is open */ 
 
    } else { 
 
    x.className = x.className.replace(" w3-show", ""); 
 
    $('body').removeClass("fixedPosition"); 
 
    } 
 
} 
 
//dropdowns on mobile nav 
 
function myDropFunc(dropParam) { 
 
    var x = document.getElementById(dropParam); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
    x.className += " w3-show"; 
 
    x.previousElementSibling.className += " w3-light-grey"; 
 
    } else { 
 
    x.className = x.className.replace(" w3-show", ""); 
 
    x.previousElementSibling.className = 
 
     x.previousElementSibling.className.replace(" w3-light-grey", ""); 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> 
 
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-right" style="width: 100%;" id="mySidebar"> 
 
    <div class="w3-panel w3-display-container w3-padding-large"> 
 
    <span onclick="myFunction()" class="w3-button w3-red w3-display-topright" style="margin-top: -22px;"><i class="fa fa-times fa-2x" aria-hidden="true"></i></span> 
 
    </div> 
 

 
    <div class="w3-dropdown-click w3-border-bottom"> 
 
    <button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('it-services')">IT SERVICES <i class="fa fa-caret-down"></i></button> 
 
    <div id="it-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;"> 
 
     <a href="it-support" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">IT Support</a> 
 
     <a href="managed-it-services" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Managed IT Services</a> 
 
     <a href="network-design-and-administration" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Network Design and Administration</a> 
 
     <a href="it-disaster-recovery" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">IT Disaster Recovery</a> 
 
    </div> 
 
    </div> 
 
    <div class="w3-dropdown-click w3-border-bottom"> 
 
    <button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('web-services')">WEB SERVICES <i class="fa fa-caret-down"></i></button> 
 
    <div id="web-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;"> 
 
     <a href="website-support-" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Website Support </a> 
 
     <a href="web-design-package" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Web Design Package</a> 
 
     <a href="affordable-seo" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Affordable SEO</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

것은 당신이 할 수있는 것은 당신이 클릭 된 드롭 다운을 표시하기 전에 모든 w3-dropdown-content을 숨길 수 있습니다. 이 여기에 클릭 한 내용을

를 보여줍니다 기능에서이 작업을 수행하는 코드의 관련 부분 전에

는 모든 컨텐츠를 닫 myDropFunc(...)을 개정 할 수 있습니다이 작업을 수행합니다. 그것은

var allDropDownContent = document.getElementsByClassName("w3-dropdown-content"); 
for (var i = 0; i < allDropDownContent.length; i++) { 
    allDropDownContent[i].className = allDropDownContent[i].className.replace(" w3-show", ""); 
} 

및 전체 작업 예제를 (그것을 가지고 여부)를 w3-show 클래스를 제거하기 위해 각 노드를 통해 클래스 명 w3-dropdown-content 및 반복 모든 컨텐츠를 가져

// Used to toggle the menu on small screens when clicking on the menu button 
 
function myFunction() { 
 
    var x = document.getElementById("mySidebar"); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
    x.className += " w3-show"; 
 
    $('body').addClass("fixedPosition"); /* prevents page from scrolling when mobile navbar is open */ 
 
    } else { 
 
    x.className = x.className.replace(" w3-show", ""); 
 
    $('body').removeClass("fixedPosition"); 
 
    } 
 
} 
 
//dropdowns on mobile nav 
 
function myDropFunc(dropParam) { 
 
    // close all drop down content before showing clicked one. 
 
    var x = document.getElementById(dropParam); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
    var allDropDownContent = document.getElementsByClassName("w3-dropdown-content"); 
 
    for (var i = 0; i < allDropDownContent.length; i++) { 
 
     allDropDownContent[i].className = allDropDownContent[i].className.replace(" w3-show", ""); 
 
    } 
 
    x.className += " w3-show"; 
 
    x.previousElementSibling.className += " w3-light-grey"; 
 
    } else { 
 
    x.className = x.className.replace(" w3-show", ""); 
 
    x.previousElementSibling.className = 
 
     x.previousElementSibling.className.replace(" w3-light-grey", ""); 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> 
 
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-right" style="width: 100%;" id="mySidebar"> 
 
    <div class="w3-panel w3-display-container w3-padding-large"> 
 
    <span onclick="myFunction()" class="w3-button w3-red w3-display-topright" style="margin-top: -22px;"><i class="fa fa-times fa-2x" aria-hidden="true"></i></span> 
 
    </div> 
 

 
    <div class="w3-dropdown-click w3-border-bottom"> 
 
    <button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('it-services')">IT SERVICES <i class="fa fa-caret-down"></i></button> 
 
    <div id="it-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;"> 
 
     <a href="it-support" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">IT Support</a> 
 
     <a href="managed-it-services" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Managed IT Services</a> 
 
     <a href="network-design-and-administration" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Network Design and Administration</a> 
 
     <a href="it-disaster-recovery" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">IT Disaster Recovery</a> 
 
    </div> 
 
    </div> 
 
    <div class="w3-dropdown-click w3-border-bottom"> 
 
    <button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('web-services')">WEB SERVICES <i class="fa fa-caret-down"></i></button> 
 
    <div id="web-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;"> 
 
     <a href="website-support-" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Website Support </a> 
 
     <a href="web-design-package" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Web Design Package</a> 
 
     <a href="affordable-seo" class="w3-bar-item w3-button w3-white w3-border-bottom w3-padding-large">Affordable SEO</a> 
 
    </div> 
 
    </div> 
 
</div>