Toggle hide/show div 适用于按钮，但不适用于 link？

Question

我希望能够在单击 link 时显示和隐藏某个 div，但我的代码只有在使用按钮时才有效。为什么会发生这种情况，我该如何解决？

这是我的代码：

.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>

这里还有一个 link 代码笔： http://codepen.io/ZlatinaNyagolova/pen/LkOgzk

更新：

我向按钮和 link 添加了另一个 class，并在关闭函数的侦听器中使用了 class。这修好了！ :)

Answer 1

弹出窗口打开正常，但您关闭弹出窗口的函数导致了问题。

您将侦听器附加到整个 window 的 "onclick" 函数，然后继续关闭弹出窗口 - 除非事件目标匹配“.btnPopup”，即您的按钮被点击。

所以发生的事情是：

您单击按钮，其 "onclick" 函数显示弹出窗口，window 的 "onclick" 函数运行，但不执行任何操作，因为事件目标匹配 ' .btnPopup'
你点击link，它的"onclick"函数显示弹窗，window的"onclick"函数运行，因为事件目标不匹配.btnPopup 它会立即关闭弹出窗口。

您可以轻松修复它，例如将另一个 class 添加到按钮和 link 并在 window.onclick 侦听器中使用 class 来检查是否单击 "something" 以打开弹出窗口：

<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

只更改代码如下：

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

Toggle hide/show div 适用于按钮，但不适用于 link？

Toggle hide/show div works on button, but not on link?

html

javascript

css

button

toggle