使元素可見並隱藏點擊

我試圖使元素#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

使元素可見並隱藏點擊

回答

相關問題