Javascript zwei window.onlick Funktionen kollidieren

Question

Ich benutze ein paar Dropdown-Boxen mit den folgenden Skripten, alles funktioniert außer zum Klicken außerhalb des Fensters, die nur auf der letzten Taste funktioniert, ich weiß, es gibt einen Weg zu seperate die window.onclick Funktionen, aber ich bin mir nicht sicher, wie, habe ein paar Dinge ausprobiert, kann aber nicht viele Informationen dazu finden.

Jede Hilfe wäre sehr willkommen!

<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction20() { 
    document.getElementById("myDropdown20").classList.toggle("show"); 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event20) { 
    if (!event.target.matches('.dropbtn20')) { 

    var dropdowns20 = document.getElementsByClassName("dropdown-content20"); 
    var i; 
    for (i = 0; i < dropdowns20.length; i++) { 
     var openDropdown20 = dropdowns20[i]; 
     if (openDropdown20.classList.contains('show')) { 
     openDropdown20.classList.remove('show'); 
     } 
    } 
    } 
} 
</script> 
<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction21() { 
    document.getElementById("myDropdown21").classList.toggle("show"); 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event21) { 
    if (!event.target.matches('.dropbtn21')) { 

    var dropdowns21 = document.getElementsByClassName("dropdown-content21"); 
    var i; 
    for (i = 0; i < dropdowns21.length; i++) { 
     var openDropdown21 = dropdowns21[i]; 
     if (openDropdown21.classList.contains('show')) { 
     openDropdown21.classList.remove('show'); 
     } 
    } 
    } 
} 
</script> 

die auf der rechten Seite schließt, wenn außerhalb der Schaltfläche klicken und Dropdown aber die auf der linken Seite wird nicht .. https://jsfiddle.net/c94gLhqm/

Answer 1

Das Ergebnis des obigen Kommentars. Hinzufügen hier für die Klarheit. Eingeführt onblur im HTML

/* When the user clicks on the button, 
 
toggle between hiding and showing the dropdown content */ 
 
function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
function myFunction2() { 
 
    document.getElementById("myDropdown2").classList.toggle("show"); 
 
}

.dropbtn { 
 
    background-color: #85c445; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 170px; 
 
} 
 

 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    z-index: 6 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    font-size: 16px; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown a:hover {background-color: #f1f1f1} 
 

 
.show {display:block;} 
 

 
.dropbtn2 { 
 
    background-color: #85c445; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 170px; 
 
} 
 

 
.dropbtn2:hover, .dropbtn2:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 
.dropdown2 { 
 
    position: relative; 
 
    display: inline-block; 
 
    z-index: 6 
 
} 
 

 
.dropdown-content2 { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

 
.dropdown-content2 a { 
 
    color: black; 
 
    font-size: 16px; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown2 a:hover {background-color: #f1f1f1} 
 

 
.show {display:block;}

<div class="dropdown"> 
 
<button onblur="myFunction()" onclick="myFunction()" class="dropbtn">Example</button> 
 
<div id="myDropdown" class="dropdown-content"> 
 
<a href="">1</a> 
 
<a href="">2</a> 
 
<a href="">3</a> 
 
<a href="">4</a> 
 
<a href="">5</a> 
 
</div> 
 
</div> 
 

 
<div class="dropdown2"> 
 
<button onblur="myFunction2()" onclick="myFunction2()" class="dropbtn2">Example</button> 
 
<div id="myDropdown2" class="dropdown-content2"> 
 
<a href="">1</a> 
 
<a href="">2</a> 
 
<a href="">3</a> 
 
<a href="">4</a> 
 
<a href="">5</a> 
 
</div> 
 
</div>

Answer 2

denke ich, Ihr einmal Fenster ändern Onclick Methode

<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction20() { 
    document.getElementById("myDropdown20").classList.toggle("show"); 
} 

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction21() { 
    document.getElementById("myDropdown21").classList.toggle("show"); 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event20) { 
    if (!event.target.matches('.dropbtn20')) { 

    var dropdowns20 = document.getElementsByClassName("dropdown-content20"); 
    var i; 
    for (i = 0; i < dropdowns20.length; i++) { 
     var openDropdown20 = dropdowns20[i]; 
     if (openDropdown20.classList.contains('show')) { 
     openDropdown20.classList.remove('show'); 
     } 
    } 
    } else if (!event.target.matches('.dropbtn21')) { 

    var dropdowns21 = document.getElementsByClassName("dropdown-content21"); 
    var i; 
    for (i = 0; i < dropdowns21.length; i++) { 
     var openDropdown21 = dropdowns21[i]; 
     if (openDropdown21.classList.contains('show')) { 
     openDropdown21.classList.remove('show'); 
     } 
    } 
    } 
} 
</script>