Question

我有一个div，当单击它时会显示一个弹出菜单。我希望用户能够单击网站正文中的任何位置以关闭弹出窗口，但是当我为此添加代码时，该弹出窗口将无法再打开。

因此，我尝试添加一个if语句，以便closemenu（）函数仅在弹出窗口已打开的情况下才尝试关闭它，但是即使弹出窗口处于打开状态，该语句似乎仍为false。

以下是用于显示弹出窗口的HTML：

    <div class="popcolor" onclick="showmenu()"> Click!
        <span class="popupcolor" id="myPopup">Pop!</span>
    </div>

这是CSS：

    .popcolor .show {
        visibility: visible;
        -webkit-animation: fadeIn 0.5s;
        animation: fadeIn 0.5s;
    }

这是Javascript：

function showmenu() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

function closemenu() {
    var popup = document.getElementById("myPopup");
    if (popup.style.visibility == "visible") {
        popup.classList.toggle("close");
    };
}

以下是用于关闭弹出窗口的HTML：

<body onclick="closemenu()">

我遍历了所有可以在此找到的解决方案的帖子，但我仍然陷于困境。任何帮助表示赞赏。

Answer 1

您可以在getComputedStyle()对象上使用window方法，以计算由应用于popup元素的类产生的样式规则。

这为您提供了一种可靠的方法来确定不同样式规则的值，例如，将“ close”类应用于popup

与此类似的方法应该对您有用：

function closemenu() {

    var popup = document.getElementById("myPopup");

    // Get the computed style, that is the combination of styles 
    // resulting from your CSS classlist, etc
    var computedStyle = window.getComputedStyle(popup, null); 

    // Get visibility value from computed styles
    var visiblityValue = computedStyle.getPropertyValue("visibility")

    if (visiblityValue == "visible") {
        popup.classList.toggle("show"); // Correct this from "close" to "show"
    };
}

您的实现中还存在其他一些功能问题，这些问题会引起问题。考虑将您的showmenu()方法更新为：

function showmenu(event) {

    // Prevent event propagation, which would cause closemenu to call 
    // after this method is called
    event.stopPropagation()

    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

有关getComputedStyle()，see the MDN documentation

的更多信息

Answer 2

这里的问题是，从div触发的点击事件会冒泡直至body，最终关闭弹出窗口。

function showmenu(e) {
  e.stopPropagation();
  console.log('toggle');
  document.getElementById("myPopup").classList.toggle("close");
}

function closemenu(e) {
  e.stopPropagation();
  console.log('hide');
  document.getElementById("myPopup").classList.add("close");
}

#myPopup.close {
  visibility: hidden;
}

body {
  border: 1px solid #ccc;
  padding: 2rem;
}

<body onclick="closemenu(event)">
  <div class="popcolor" onclick="showmenu(event)"> Click!
    <span class="popupcolor close" id="myPopup">Pop!</span>
  </div>
</body>

P.S。使用event.stopPropagation（）取消/消费事件

Answer 3

由于可见性属性是在类级别设置的，因此样式信息在您元素的style属性中不可用。也许不用检查特定的样式，而可以检查“ show”类当前是否已分配给您的元素，如下所示：

function closemenu() {
    var popup = document.getElementById("myPopup");
    if (popup.classList.contains("show")) {
        popup.classList.toggle("close");
    };
}

Answer 4

您的代码中的问题是使用JavaScript函数。

尝试这个我从W3Schools提取的简单示例，并针对您的情况进行了增强。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_add_class

W3CSchool TryIt编辑器页面似乎存在一些问题。以下是相同代码的JSBin链接： https://jsbin.com/xefolinape/edit?html,output

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Click the "Try it" button to add the "mystyle" class to the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<button onclick="myFunctionClose()">Close it</button>

<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.add("mystyle");
}
function myFunctionClose() {
   var element = document.getElementById("myDIV");
   element.classList.remove("mystyle");
}

</script>

</body>
</html>

希望这会有所帮助！

如果检查CSS属性的语句不起作用

4 个答案: