Сделать текст видимым снова после того, как он был скрыт нажатием кнопки

Question

У меня есть кнопка, которая падает и предназначена для отображения нового текста/скрытия старого заголовка. В настоящее время я получил мой код установлен как

$('a.btn-navbar').click(function(){ 
      $('header#header-top').css('height',''); 
      $('#headerContainer').css('height',''); 
      $('#headerText').css('visibility','hidden'); 
     }); 

как бы я идти о HeaderText повторного включения, когда кнопка нажата еще раз, чтобы скрыть падение кнопки меню вниз?

Я думал об использовании переключателей, но я не уверен на 100%, и думал, что лучше всего получить мнение.

Редактировать. Я использовал .toggle(), чтобы заставить его работать. Проблема, с которой я столкнулся раньше, почему я не использовал это, заключалась в том, что она слегка перекрывала кнопку, которая мне нужна для раскрывающегося списка. Добавление z-index: -1; позволил мне обойти это.

Answer 1

Вот пример:

$('a.btn-navbar').click(function(){ 
      $('header#header-top').css('height',''); 
      $('#headerContainer').css('height',''); 
      $('#headerText').toggle(); 
     }); 

Answer 2

Попробуйте написать условие с тройным оператором,

$('a.btn-navbar').click(function(){ 
    var header = $('#headerText'); 
    header.css('visibility',header.css('visibility') === 'hidden' ? 'visible' : 'hidden'); 
}); 

или сделать это с .toggleClass(),

написать условие с тройным оператором,

.visible { visibility:visible; } 
.hidden { visibility:hidden; } 

$('a.btn-navbar').click(function(){ 
    var header = $('#headerText'); 
    header.toggleClass('hidden visible'); 
}); 

Answer 3

Использование (Видимый). Селектор $ ('a.btn-Navbar') нажмите (функция() {

  if ($("#headerText").is(":visible")) 
      { 
      $('header#header-top').css('height',''); 
      $('#headerContainer').css('height',''); 
      $('#headerText').hide(); 
      }else{ 
      $('#headerText').show(); 
     } 
    });