javascript - 使元素可见并在单击时隐藏

Question

我正在尝试使元素 #mask123 在单击时可见或隐藏。默认情况下，该元素是隐藏的，但当我单击它时它会变得可见。下面的 js 在第一次点击时起作用，元素变为可见。现在，我想单击相同的按钮 #menu-btn-toggle 并且元素切换到不可见模式，但我无法使其工作。我在这里使用内联 css。这是一个简单的案例，但我对 js 的有限了解对我没有帮助。

   <div id="menu-btn">
      <a href="#" title="Menu" id="menu-btn-toggle" class="menu-icon-link" onclick="showMask();">
    </div>

html代码

<div class="side-nav--mask">
    <div class="js-side-nav-mask liquid-container">
        <div id="mask123" class="liquid-child" style="visibility: hidden; top: 0px; left: 0px; opacity: 1;"></div>
    </div>
</div>

这是我的 JS:

<script type="text/javascript">
    function showMask() {
        var node = document.getElementById('mask123')
        node.style.visibility = 'visible';
    }
</script>

当我尝试一个条件(如下)时它不起作用:

<script type="text/javascript">
    function showMask() {
        var node = document.getElementById('mask123')
        node.style.visibility = 'visible';
        if node.is(":visible") {
            node.style.visibility = 'hidden';
        }
    }
</script>

Answer 1

function showMask() {
    var node = document.getElementById('mask123');
    if (node.style.visibility=='visible') {
        node.style.visibility = 'hidden';
    }
    else
        node.style.visibility = 'visible'
}

这就是你应该如何使用你的 if 条件:)