使元素可见并隐藏点击

我试图使元素#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>

来源

2016-04-21 Anay Bose

尝试切换visibility公关基于它的当前值operty，

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

您正在访问的jQuery的is()功能在普通的节点对象。 Node对象在其原型中没有调用is的函数。

来源

2016-04-21 17:20:14

.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'; 
    } 
}

来源

2016-04-21 17:22:49 bcherny

感谢您的时间。我赞成你。 –

如果你不介意使用jQuery你可以用一个简单的功能和CSS类：

// after removing onclick="" attribute from html 

$('#menu-btn-toggle').click(function(){ 
    $('#mask123').toggleClass('visible'); 
});

#mark123.visible{ 
    visibility: visible; 
}

注意，在这种情况下，你还必须指定#mask123最初是隐藏为了做过渡到可见。

所以，你必须把它添加到您的CSS

#mask123 { 
    visibility:hidden; /* initial state = hidden */ 
}

Working jsFiddle

来源

2016-04-21 17:24:51 fbid

如果他介意使用jQuery会怎么样？ – dbf

@dbf他/她在问题中包含了jQuery标记，因此他/她可能不会 – fbid

@fbid，感谢您的时间和贡献。 –

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

这是你应该如何使用你的，如果条件:)

来源

2016-04-21 17:34:36 urvashi

@ Urvashi，谢谢你的时间。我赞成你。 –

:)谢谢你..任何时候 – urvashi

我也赞成！ ;） –

使用班级列表.toggle，既然你使用的是内联代码，你将需要重要的

var btn = document.querySelector("#menu-btn-toggle"), 
 
    mask123 = document.querySelector("#mask123"); 
 
function classToggle() { 
 
     mask123.classList.toggle("visible") 
 
    } 
 
btn.addEventListener("click", classToggle, false)

#mask123.visible{ 
 
    visibility: visible!important; 
 
    }

<div id="menu-btn"> 
 
     <a href="#" title="Menu" id="menu-btn-toggle" class="menu-icon-link">Click to toggle </a> 
 
    </div> 
 

 
<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;">Some text</div> 
 
    </div> 
 
</div>

来源

2016-04-21 17:39:53

使元素可见并隐藏点击

回答

相关问题