Как показать/скрыть элемент DOM с помощью jQuery?

Question

Есть кнопка (id = "hide_message_button") и сообщение (id = "message"). Щелчок по кнопке должен скрывать/показывать сообщение. Исходный код:

$('#hide_message_button').click(function(){ 
    var bool = $('#message').css('visibility','hidden').is(':hidden'); 
    if(bool){ 
     $('#message').show(); 
     $(this).val('Hide'); 
    } 
    else { 
     $('#message').hide(); 
     $(this).val('Show'); 
    } 
}); 

У меня есть ошибка: сообщение скрыто с первым нажатием на кнопке и не раз, не показано (а значение кнопки изменяется на «Show»). Что не так? Благодарю.

Answer 1

Try:

$('#hide_message_button').click(function(){ 
    $('#message').toggle(); 
}); 

Answer 2

Элементы с visibility: hidden свойствами стиля являются не скрыты, так как они занимают пространство в макете. Попробуйте:

var bool = $('#message').is(":hidden"); 

или:

var bool = $('#message:hidden').length; 

или:

var bool = $('#message').css("display") == "none"; 

От manual:

Элементы можно считать скрытым по нескольким причинам:

• У них нет значения отображения CSS.
• Это элементы формы с типом = «скрытые».
• Их ширина и высота явно установлены в 0.
• Элемент предка скрыт, поэтому элемент не отображается на странице.

Answer 3

Посмотрите на функцию toggle.

<input type="button" id="hide_message_button" value="My button" /> 
<p id="message">A message</p>​ 

и

$('#hide_message_button').click(function(){ 
    $('#message').toggle(); 
});​ 

Answer 4

Это потому, что css('visibility','hidden') вызов скрывает сообщение, а затем он никогда не появится снова, потому что метод show не меняет visibility стиля.

Затем элемент будет переключаться между скрытием (display = block, visibility = hidden) и удалением (display = none, visibility = hidden). В одном состоянии элемент занимает пробел, но сообщение не отображается ни в одном из состояний.

Просто удалите код, который устанавливает стиль visibility, и код работает.

Демо: http://jsfiddle.net/Guffa/JqE3Y/

Answer 5

Используйте переключатель вместо проверить видимость. Этот код работает: http://jsfiddle.net/8qu9y/