切换隐藏/显示div可以在按钮上使用，但不能在链接上使用吗？

Question

I want to be able to show and hide a certain div when clicking on a link, but my code works only if I use a button. Why is this happening and how can i fix it?

Here is my code:

 .popup { position: relative; display: inline-block; } .popup-content { display: none; position: absolute; 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> 

Also here it is a link for codepen: http://codepen.io/ZlatinaNyagolova/pen/LkOgzk

UPDATE:

I added another class to the button and the link and used that class in the listener in my closing function. This fixed it! :)

Answer 1

The popup opens alright, but your function for closing the popup is causing the problems.

You attach a listener to the whole window's "onclick" function, and then proceed to close the popup - unless the event target matched ".btnPopup", ie your button was clicked.

So what's happening is:

1. You click on the button, its "onclick" function shows the popup, the window's "onclick" function runs, but doesn't do anything because the event target matches '.btnPopup'
2. You click on the link, its "onclick" function shows the popup, the window's "onclick" function runs, and as the event taget does not match .btnPopup it closes the popup immediately.

You can fix it easily, by eg adding another class to both the button and the link and using that class in your window.onclick listener to check if "something" was clicked to open the popup:

<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

Only change Code like this :

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