我正在尝试在点击时使元素#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>