Schließen Sie das Dropdown, wenn der Benutzer außerhalb davon klickt

Question

Ich habe 2 Dropdown-Schaltflächen. Wenn ich außerhalb/ODER auf es klicke, schließt es sich ABER, wenn ich den anderen Dropdownknopf klicke, schließt es nicht und der andere springt heraus. Ich möchte es schließen, wenn ich auf den anderen Knopf oder irgendetwas außerhalb davon klicke.

function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
function myFunction1() { 
 
    document.getElementById("myDropdown1").classList.toggle("show"); 
 
} 
 

 
window.onclick = function(e) { 
 
    if (!e.target.matches('.dropbtn')) { 
 

 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    for (var d = 0; d < dropdowns.length; d++) { 
 
     var openDropdown = dropdowns[d]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="index.php" class="cmn-t-underline">Acasa</a></li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()" style="cursor:pointer">Infinatri firme</a> 
 
     <div class="dropdown-content" id="myDropdown"> 
 
     <a href="infintare_societate_limitata.php"> Societate cu raspundere limitata (S.R.L.) </a> 
 
     </div> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction1()" style="cursor:pointer">Modificari firma</a> 
 
     <div class="dropdown-content" id="myDropdown1"> 
 
     <a href="modificari_actualizare_date.php">Actualizare date de identificare</a> 
 
     </div> 
 
    </li>

Answer 1

Sie die Nähe des myDropdown1 auf Click-Ereignis von myDropdown und umgekehrt auslösen können.

Answer 2

Sie können jeden Klick verdecken das Dropdown und jeden Klick, der es zum Elternteil des Dropdowns macht, um Blasen zu stoppen.

/* Anything that gets to the document 
/* Anything that gets to the document 
    will hide the dropdown */ 
$(document).click(function(){ 
    $("#dropdown").hide(); 
}); 

/* Clicks within the dropdown won't make 
    it past the dropdown itself */ 
$("#dropdown").click(function(e){ 
e.stopPropagation(); 
}); 

Answer 3

Sie könnten so etwas wie das.

function myFunction(event, dropDownName) { 
 
    //Pass in your dropdownName which is the dropdown 
 
    var dropDownHandler = document.getElementById(dropDownName); 
 

 
    dropDownHandler.classList.toggle("show"); 
 
    // Get the trigger element of the dropdown 
 
    var menuHandler = event.currentTarget; 
 

 
    if (dropDownHandler.classList.contains("show")) { 
 
    //Attach only when the dropdown is active, 
 
    //to ensure onclick isn't called always 
 
    document.addEventListener("click", function(docEvent) { 
 
     documentHandler(docEvent, menuHandler) 
 
    }); 
 
    } else { 
 
    dropDownHandler.classList.toggle("show"); 
 
    // If is closed, remove the handler 
 
    document.removeEventListener("click", documentHandler); 
 
    } 
 

 
    function documentHandler(event, menuHandler) { 
 
    if (menuHandler.contains(event.target)) { 
 
     dropDownHandler.classList.add("show"); 
 
    } else { 
 
     dropDownHandler.classList.remove("show"); 
 
    } 
 
    } 
 
}

.show { 
 
    display: block !important; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="index.php" class="cmn-t-underline">Acasa</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(event, 'myDropdown')" style="cursor:pointer">Infinatri firme</a> 
 
     <div class="dropdown-content" id="myDropdown"> 
 
     <a href="infintare_societate_limitata.php"> Societate cu raspundere limitata (S.R.L.) </a> 
 
     </div> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(event, 'myDropdown1')" style="cursor:pointer">Modificari firma</a> 
 
     <div class="dropdown-content" id="myDropdown1"> 
 
     <a href="modificari_actualizare_date.php">Actualizare date de identificare</a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</nav>