페이지 레이아웃에서 공간을 유지하면서 jQuery 숨기기 요소


169

jQuery에 요소를 숨길 수 있지만 DOM이 숨겨져있을 때는 변경할 수없는 방법이 있습니까? 특정 요소를 숨기고 있지만 숨기면 아래의 요소가 위로 이동합니다. 나는 그런 일이 일어나고 싶지 않습니다. 나는 공간이 동일하게 유지되기를 원하지만 요소는 마음대로 표시되거나 숨겨져 있습니다.

내가 할 수 있습니까?


너비를 0으로 지정하는 것은 어떻습니까?
mrtsherman

8
@mrtsherman : 폭이 0 인 것이 권장되지 않습니다. 많은 화면 판독기 (맹인 또는 시력이 낮은 사용자가 사용)는 여전히 이런 방식으로 '숨겨진'콘텐츠를 읽습니다. 이 시점에서 사용할 수 없습니다. CSS 가시성 사용 : 숨겨진 방법이 여기에 있습니다.
BrendanMcK

fadeIn 및 fadeOut elems 전에 높이를 동적으로 저장할 수 있습니다 => 아래층을 참조하십시오 (제품 루프에서 사용하고 있습니다.) $ ( '. or-woo-bt'). parent (). parent (). parent ( ) .hover (function () {// 공간 유지; var rightHeight = $ (this) .height (); $ (this) .css ( 'height', rightHeight); // 숨기기; $ (this) .parent ( ) .parent (). find ( 'a span.family-price'). fadeOut ();}, function () {// Show; $ (this) .parent (). parent (). find ( 'a span .family-price '). fadeIn ('slow ');});
Olivier

답변:


296

대신 다음을 hide()사용하십시오.

css('visibility','hidden')

hide()display스타일을로 설정하여 none문서 플로우에서 요소를 완전히 제거하고 공간을 차지하지 않도록합니다.

visibility:hidden 공간을 그대로 유지합니다.


82
css('visibility','visible')
Dr.Molle

1
또는css('visibility', '')
안토니 맥그래스


19

display: none;콘텐츠 흐름에서 벗어나 다른 콘텐츠가 남은 빈 공간으로 이동하는 것을 볼 수 있습니다. (display: block; 모든 것을 방해하는 흐름으로 다시 가져옵니다.)

visibility: hidden;공간을 차지하는 콘텐츠 흐름 내에서 유지하지만 보이지 않게 만듭니다. ( visibility: visible;다시 공개합니다.)

visibility콘텐츠 흐름을 변경하지 않으려면 사용 하고 싶을 것입니다.



7

트릭을보기 opacity: 0전에 이전에 사용했습니다 visibility: hidden.

그러나 요소를 볼 수는 없지만 요소와 상호 작용할 수opacity: 0 있기 때문에 많은 경우 문제가 있습니다! ( DeadPassive가 지적한대로 )

보통 그것은 당신이 원하는 것이 아닙니다. 그러나 아마도 때때로 당신은 할 수 있습니까?


1
숨겨진 요소와 상호 작용할 수없고 불투명도가 0 인 요소와 상호 작용할 수는 없습니다.
DeadPassive

@feskr 유리한 상황을 생각할 수 있다면 공유하십시오!
joeytwiddle

@ joeytwiddle 나는 당신에게 대답을 우연히 발견했다. 공간을 유지하면서 특정 상태의 요소와의 상호 작용을 방지해야했습니다. 나는 가시성 : 숨겨진 것이 공간을 보존하지만 그것이 상호 작용을 방해한다는 것을 몰랐다는 사실을 알고있었습니다.
feskr
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.