jQuery ẩn phần tử trong khi bảo toàn không gian của nó trong bố cục trang


169

Có cách nào trong jQuery nơi tôi có thể ẩn một phần tử, nhưng không thay đổi DOM khi nó bị ẩn không? Tôi đang ẩn một yếu tố nào đó nhưng khi nó bị ẩn, các yếu tố bên dưới sẽ di chuyển lên. Tôi không muốn điều đó xảy ra. Tôi muốn không gian được giữ nguyên, nhưng yếu tố sẽ được hiển thị / ẩn theo ý muốn.

Tôi có thể làm điều này?


Làm thế nào về việc cho nó chiều rộng bằng không?
mrtsherman

8
@mrtsherman: không có chiều rộng bằng 0: nhiều trình đọc màn hình (được sử dụng bởi người dùng bị mù hoặc người có thị lực kém) vẫn sẽ đọc nội dung bị 'ẩn' theo cách này, có thể khiến họ nhầm lẫn là nội dung không phải là ' T phải có sẵn tại thời điểm này. Sử dụng khả năng hiển thị css: hidden là cách để đi đến đây.
BrendanMcK

Bạn có thể lưu chiều cao một cách linh hoạt trước fadeIn và fadeOut elems của bạn => xem tầng dưới (Tôi đang sử dụng nó trong vòng lặp sản phẩm.) $ ('. Hoặc-woo-bt'). Parent (). Parent (). Parent (). ) .hover (function () {// Giữ nguyên không gian; var rightHeight = $ (this) .height (); $ (this) .css ('height', rightHeight); // Hide; $ (this) .parent ( ) .parent (). find ('a span.f Family-price'). fadeOut ();}, function () {// Show; $ (this) .parent (). Parent (). find ('a span .f Family-price '). fadeIn (' chậm ');});
Olivier

Câu trả lời:


296

Thay vì hide(), sử dụng:

css('visibility','hidden')

hide()thiết lập displayphong cách cho none, mà hoàn toàn loại bỏ các yếu tố từ các dòng chảy tài liệu và làm cho nó không chiếm nhiều không gian.

visibility:hidden giữ không gian như nó vốn có


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

1
hoặccss('visibility', '')
Anthony McGrath

40

Hãy thử đặt visibilitythành hidden:

$("#id").css("visibility", "hidden");

19

display: none;sẽ đưa nó ra khỏi luồng nội dung để bạn sẽ thấy nội dung khác của bạn di chuyển vào khoảng trống còn lại phía sau. ( display: block;đưa nó trở lại vào dòng chảy đẩy mọi thứ ra khỏi đường đi.)

visibility: hidden;sẽ giữ nó trong luồng nội dung chiếm không gian nhưng chỉ đơn giản là làm cho nó vô hình. ( visibility: visible;sẽ tiết lộ lại.)

Bạn sẽ muốn sử dụng visibilitynếu bạn muốn dòng nội dung của mình không thay đổi.



7

Trước đây tôi đã sử dụng opacity: 0trước khi tôi nhìn thấy các visibility: hiddenmẹo.

Nhưng trong nhiều trường hợp opacity: 0là có vấn đề, bởi vì nó cho phép bạn tương tác với phần tử , mặc dù bạn không thể nhìn thấy nó! (Như được chỉ ra bởi DeadPassive .)

Thông thường đó không phải là những gì bạn muốn. Nhưng có lẽ đôi khi bạn có thể?


1
Bạn không thể tương tác với một yếu tố ẩn, trong khi bạn có thể với một yếu tố có độ mờ 0.
DeadPassive

@feskr Nếu bạn có thể nghĩ về một tình huống sẽ thuận lợi, hãy chia sẻ!
joeytwiddle

@joeytwiddle Tôi vấp phải câu trả lời của bạn. Tôi cần ngăn chặn sự tương tác với một yếu tố ở một trạng thái nhất định, trong khi vẫn giữ được không gian của nó. Tôi đã nhận thức được thực tế rằng tầm nhìn: ẩn sẽ bảo toàn không gian, nhưng không biết nó sẽ ngăn cản sự tương tác.
feskr
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.