jQuery hide/show a div

Question

Вот моя структура HTML.

<div id="head"></div> 
<div id="content"></div> 
<div id="footer"></div> 

Теперь, когда я скрыть content DIV, используя $("#content").hide, мой сноска блок приходит. Я хочу, чтобы мой блок нижнего колонтитула оставался неподвижным внизу, даже если я скрою его или покажу.

Как я могу это сделать?

Answer 1

display: none и visibility: hidden разные.

Если вы выберете display: none, DIV больше не будет занимать пространство, поэтому нижний колонтитул будет поднят.

Таким образом, вы должны использовать (как в @putvande сказал в комментарии):

$('#content').css('visibility','hidden') 

Если вы установите visibility: hidden, то DIV будет скрыта (невидимый), но она по-прежнему занимает пространство, так как его display CSS по умолчанию display: block.

Чтобы снова показать содержимое, установлено:

$('#content').css('visibility','visible') 

Кроме того, обычно сноска использует position: fixed и bottom: 0, чтобы зафиксировать его в нижней части страницы, которая, вероятно, избежать проблемы вы столкнулись прямо сейчас.

Answer 2

Вместо шкуры(), используйте:

css('visibility','hidden') 

скрыть() задает стиль отображения непревзойденных, которая полностью удаляет элемент из потока документов и заставляет его не занимают места.

видимость: скрытый сохраняет пространство как есть.

и

вы можете показать, Javacript событие action.For например

<div id="clickme"> 
    Click here 
</div> 
<div id="content"> 
    here is the content div 
</div> 
<script> 
$("#clickme").click(function() { 
    $("#content").show("slow", function() { 
    // Animation complete. 
    }); 
}); 

Answer 3

В приведенном выше сценарии, вы должны написать CSS для колонтитула, как показано ниже,

#footer{ 
    position:absolute; 
    top:150px;  
} 

вас может изменить верх значение свойства согласно вашему требованию.

Пожалуйста, обратитесь ниже JsFiddle ссылку,

http://jsfiddle.net/rrmrX/

Answer 4

Попробуйте это -

head {position: fixed;top: 0} 
footer {position: fixed;bottom: 0} 

Answer 5

you can use this sytax 
 
$("#idContent).toggle(); 
 
or 
 
you cant write event click after call funtion use it 
 
$("#idContent").hide(); 
 
$("#idContent").show();