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?

jquery html

— slandau
nguồn

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

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ó

— Dr.Molle
nguồn

82

css('visibility','visible')

— Dr.Molle

1

hoặccss('visibility', '')

— Anthony McGrath

40

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

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

— Chad Levy
nguồn

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.

— Lấp lánh
nguồn

15

trong một câu trả lời khác, lưu ý rằng jQuery fadeTokhông được thiết lập display:nonekhi hoàn thành nên cũng có thể cung cấp giải pháp tại đây, thay vì sử dụng fadeOutví dụ:

jQuery, ẩn một div mà không làm phiền phần còn lại của trang

— lunelson
nguồn

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ể?

— joeytwiddle
nguồn

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