Question

我希望能够在点击链接时显示和隐藏某个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>

此处它是codepen的链接： http://codepen.io/ZlatinaNyagolova/pen/LkOgzk

更新：

我在按钮和链接中添加了另一个类，并在我的关闭函数中在侦听器中使用了该类。这固定了！：）

Answer 1

弹出窗口打开正常，但关闭弹出窗口的功能导致问题。

您将监听器附加到整个窗口的“onclick”功能，然后继续关闭弹出窗口 - 除非事件目标与“.btnPopup”匹配，即单击了您的按钮。

所发生的事情是：

你点击按钮，它的“onclick”功能显示弹出窗口，窗口的“onclick”功能运行，但没有做任何事情，因为事件目标匹配'.btnPopup'
你点击链接，它的“onclick”功能显示弹出窗口，窗口的“onclick”功能运行，并且由于事件taget不匹配.btnPopup它会立即关闭弹出窗口。

您可以通过以下方式轻松修复在按钮和链接中添加另一个类，并在window.onclick监听器中使用该类来检查是否单击了“某事”以打开弹出窗口：

<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')) {

切换隐藏/显示div工作在按钮上，但不在链接上？

2 个答案: