Создание элемента видимым и скрыть при нажатии

Question

Я пытаюсь сделать элемент #mask123 видимым или скрытым при нажатии. По умолчанию элемент скрыт, но по щелчку он становится видимым. Js ниже работает при первом щелчке, и элемент становится видимым. Теперь, я хотел бы нажать на ту же кнопку #menu-btn-toggle, и элемент переключается в невидимый режим, и я не могу заставить его работать. Я использую inline 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

Попробуйте переключить visibility pr operty на основе текущего значения этого,

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

Вы обращаетесь is() функцию Jquery над объектом простого узла. Объект узла не имеет функции, называемой в ее прототипе.

Answer 2

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

Answer 3

Если вы не возражаете, используя 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

Answer 4

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

Это, как вы должны использовать, если условие :)

Answer 5

Используйте ClassList .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>