Question

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

2016-04-21

17960

javascript html

我试图使元素 #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 条件 :)

Answer 2

尝试根据其当前值切换 visibility 属性，

function showMask() {
    var node = document.getElementById('mask123')
    var visibility = node.style.visibility;
    node.style.visibility = visibility == "visible" ? 'hidden' : "visible"
}

您正在通过普通节点对象访问 jquery 的 is() 函数。节点对象的原型中没有名为 is 的函数。

Answer 3

.is 是一个 jquery 方法。要使用它，您首先需要用 jquery 包装您的元素/选择器 - $('#mask123').is(':visible') 。

但实际上您不需要 jquery，您可以在基本 JS 中完成此操作：

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