div를 숨기되 빈 공간은 유지합니다.

div를 숨기되 빈 공간은 유지합니다.

나는 다음과 같은 div 요소가 있습니다.

.description {
  color: #b4afaf;
  font-size: 10px;
  font-weight: normal;
}

<div class="description">Some text here</div>

그러면 위의 div를 숨기기 위해 요소에 클릭 기능이 있습니다.

$('#target').click(function(){
  $(".description").hide();
});

내가 디브를 숨기면 디브가 무너지면서 공간 차지가 멈춥니다.이것은 제 페이지의 레이아웃을 엉망으로 만듭니다.

디브를 숨기면서도 이전의 공간을 유지할 수 있는 방법이 있을까요?폰트 색상은 여전히 선택 가능하기 때문에 변경하고 싶지 않습니다.

이에 대해 가시성 CSS 속성 사용

가시성:

가시성 속성은 요소에서 생성된 상자를 렌더링할지 여부를 지정합니다.

$(".description").css('visibility', 'hidden');

데모: Fiddle

완성도를 위한 또 다른 옵션.토글opacity:

$(".description").css('opacity', 0); // hide
$(".description").css('opacity', 1); // show

http://jsfiddle.net/KPqwt/

사용중visibility이 작업에 선호됩니다.

시도:

$(".description").css("visibility", "hidden")

hide()는 다음과 같습니다.$(".description").css("display", "none");

요소가 사용하던 공간을 예약하지 않습니다.

Hidden는 요소를 보이지 않게 만들지만 공간은 여전히 확보합니다.

Opacity:0을 사용하는 dfsq의 예에서는 선택할 때 텍스트가 강조 표시되지 않지만 내용 선택, 복사/붙여넣기 등을 여전히 할 수 있습니다.

CSS에는 여러 가지 방법이 있습니다.

• 가시성: 숨김; // 선호
• 변환: 스케일(0);
• z-index: -999999; // 특정 위치 지정과 함께 작동하지 않음
• 불투명도: 0; // 클릭 및 입력 이벤트는 여전히 작동합니다.

바깥쪽에 다른 디브를 둘렀다가 차지할 특정한 높이를 알려주면 될 겁니다당신의 내부 디브가 보여주고 감추고 퇴색하는 등을 할 수 있고, 외부 디브가 페이지의 부동산을 억제할 것입니다.

언급URL : https://stackoverflow.com/questions/16316431/hide-div-but-keep-the-empty-space