Ẩn div nhưng giữ khoảng trống

Question

Tôi có div sau

CSS

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

HTML

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

Sau đó, tôi có một chức năng nhấp chuột vào một yếu tố để ẩn div trên:

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

Khi tôi ẩn div nó sẽ sụp đổ (ngừng sử dụng bất kỳ không gian nào). Điều này đang rối tung với bố cục của trang của tôi.

Có cách nào tôi có thể ẩn div nhưng vẫn chiếm không gian mà nó đã dùng trước đó? Tôi không muốn thay đổi màu chữ vì nó vẫn có thể chọn được.

Cảm ơn

Answer 1

Sử dụng visibility tài sản css cho tầm nhìn

này:

Thuộc tính tầm nhìn cho phéo các hộp được tạo ra bởi một yếu tố được cung cấp.

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

Demo: Fiddle

Answer 2

Hãy thử:

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

hide() là tương đương với: $(".description").css("display", "none");

nào không đặt trước không gian nguyên tố này đang hướng đến.

Hidden làm cho phần tử ẩn, nhưng ảnh tĩnh giữ khoảng trống.

Answer 3

Và một tùy chọn khác vì mục đích hoàn chỉnh. Chuyển đổi opacity:

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

http://jsfiddle.net/KPqwt/

Tuy nhiên sử dụng visibility được ưa thích cho nhiệm vụ này.

Answer 4

bạn có thể quấn một div khác xung quanh bên ngoài của nó, và có thể nói với nó một chiều cao cụ thể để chiếm. theo cách đó div bên trong của bạn có thể hiển thị và ẩn và mờ dần, vv, và div bên ngoài sẽ giữ bất động sản trên trang.

Answer 5

Điều quan trọng cần lưu ý là ví dụ của dfsq sử dụng Độ mờ: 0 sẽ vẫn cho phép chọn nội dung, sao chép/dán, v.v. mặc dù không có đánh dấu văn bản rõ ràng khi chọn.