切换隐藏/显示 div 适用于按钮，但不适用于链接？答案

【问题标题】：Toggle hide/show div works on button, but not on link?切换隐藏/显示 div 适用于按钮，但不适用于链接？
【发布时间】：2016-07-14 06:31:57
【问题描述】：

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

更新：

我向按钮和链接添加了另一个类，并在我的关闭函数中的侦听器中使用了该类。这解决了它！ :)

【问题讨论】：

标签： javascript html css button toggle

【解决方案1】：

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

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

所以发生的事情是：

单击按钮，其“onclick”函数显示弹出窗口，窗口的“onclick”函数运行，但不执行任何操作，因为事件目标匹配“.btnPopup”
单击链接，其“onclick”函数显示弹出窗口，窗口的“onclick”函数运行，并且由于事件标记不匹配 .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

【讨论】：

是的，就是这样！我刚刚添加了这个验证，它起作用了：if (!event.target.matches('.btnPopup') && !event.target.matches('.linkStyle')) 谢谢！
不客气！也考虑过扩展验证。取决于你想做什么。如果有多种方法可以打开弹出窗口（即要检查许多不同的类），我会为此添加一个专用类。 if 语句可能会变得很长，否则会很混乱。
好的，我会考虑的。这是非常好的解释和解决方案 - 我使用它并更新了我的答案。再次感谢。 :)
现在我发现这仅适用于 Chrome，但不适用于 Mozilla。您知道可能导致问题的原因吗？
在 Firefox 控制台查看错误信息！在showPopup() 中有event.preventDefault()，但是event 在该函数的上下文中是未知的。尝试取消注释该行。

【解决方案2】：

只更改这样的代码：

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

【讨论】：