Toggle ausblenden/show div funktioniert auf Knopf, aber nicht auf Link?

Question

Ich möchte in der Lage sein, ein bestimmtes Div anzeigen und ausblenden, wenn Sie auf einen Link klicken, aber mein Code funktioniert nur, wenn ich eine Schaltfläche verwenden. Warum passiert das und wie kann ich es reparieren?

Hier ist mein Code:

.popup { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.popup-content { 
 
    display: none; 
 
    position: absolute; 
 
\t width: 1000px; 
 
    
 
} 
 

 
.show { 
 
    display:block; 
 
} 
 

 

<div class="popup"> 
 

 
    <button onclick="showPopup()" class="btnPopup thePopup">POPUP FROM BUTTON</button> 
 
    
 
    <a class="linkStyle thePopup" onclick="javascript:showPopup()" href="#" return false;>POPUP FROM LINK</a> 
 

 

 
    <div id="myPopup" class="popup-content" style="border:1px; border-style:solid; margin:10px; padding: 10px;width:200px;"> 
 

 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quasi voluptas impedit. Culpa impedit? 
 

 
    </div> 
 
</div> 
 

 
<script> 
 
    /* When the user clicks on the button, 
 
    toggle between hiding and showing the dropdown content */ 
 
    function showPopup() { 
 
     event.preventDefault(); 
 
     document.getElementById("myPopup").classList.toggle("show"); 
 
     return false; 
 
    } 
 

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

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

Auch hier ist es ein Link für codepen ist: http://codepen.io/ZlatinaNyagolova/pen/LkOgzk

UPDATE:

ich eine andere Klasse hinzugefügt der Knopf und der Link und benutzte diese Klasse im Listener in meiner Closing-Funktion. Das hat es behoben! :)

Answer 1

Das Popup öffnet sich gut, aber Ihre Funktion zum Schließen des Popups verursacht die Probleme.

Sie hängen einen Listener an die "onclick" -Funktion des gesamten Fensters an und schließen dann das Popup - sofern das Ereignisziel nicht mit ".btnPopup" übereinstimmt, d. H.

Also, was passiert ist:

1. Sie auf die Schaltfläche klicken, wird seine „Onclick“ -Funktion zeigt das Popup, das Fenster „Onclick“ -Funktion läuft, aber nichts tun, weil das Ereignis Ihrem Ziel " .btnPopup '
2. Sie klicken auf den Link, seine "onclick" -Funktion zeigt das Popup, die "onclick" -Funktion des Fensters wird ausgeführt, und da das Ereignis nicht mit .ttnPopup übereinstimmt, wird das Popup sofort geschlossen.

Sie können es leicht reparieren, z. sowohl für die Taste eine andere Klasse auf das Hinzufügen und die Verbindung und die Verwendung dieser Klasse in Ihrem window.onclick Zuhörer zu überprüfen, ob „etwas“ geklickt wurde, um das Popup zu öffnen:

<button onclick="showPopup()" class="btnPopup Popup">POPUP FROM BUTTON</button> 
<a class="linkStyle Popup" onclick="showPopup()" href="#">POPUP FROM LINK</a> 
... 
window.onclick = function(event) { 
    if (!event.target.matches('.Popup')) { 
     //Proceed with closing the popup 

Answer 2

Nur-Code ändern wie folgt aus:

window.onclick = function(event) { 
     if (!event.target.matches('.btnPopup')&& !event.target.matches('.linkStyle')) {