div를 숨기고 빈 공간은 유지

div를 숨기고 빈 공간은 유지

---

다음 div가 있습니다.

CSS

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

HTML

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

그런 다음 위의 div를 숨기는 요소에 대한 클릭 기능이 있습니다.

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

div를 숨기면 축소됩니다 (공간 차지 중지). 이것은 내 페이지의 레이아웃을 엉망으로 만듭니다.

div를 숨기면서도 이전에 차지했던 공간을 차지할 수있는 방법이 있습니까? 글꼴 색상은 여전히 ​​선택할 수 있으므로 변경하고 싶지 않습니다.

감사

---

이를 위해 가시성 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 예제에서는 선택할 때 텍스트 강조 표시가 보이지 않지만 여전히 내용을 선택, 복사 / 붙여 넣기 등을 할 수 있다는 점에 유의하는 것이 중요합니다 .

---

외부에 다른 div를 감쌀 수 있으며, 차지할 특정 높이를 지정할 수 있습니다. 그런 식으로 내부 div가 표시하고 숨기고 fadeOut 등을 할 수 있으며 외부 div는 페이지의 부동산을 유지합니다.

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