องค์ประกอบ jQuery ซ่อนในขณะที่รักษาพื้นที่ในรูปแบบหน้า

169

มีวิธีใน jQuery ที่ฉันสามารถซ่อนองค์ประกอบ แต่ไม่เปลี่ยน DOM เมื่อถูกซ่อนหรือไม่ ฉันซ่อนองค์ประกอบบางอย่าง แต่เมื่อมันถูกซ่อนองค์ประกอบด้านล่างจะเลื่อนขึ้น ฉันไม่ต้องการที่จะเกิดขึ้น ฉันต้องการพื้นที่ให้อยู่เดิม แต่องค์ประกอบที่จะแสดง / ซ่อนที่จะ

ฉันจะทำสิ่งนี้ได้ไหม

jquery html

— slandau
แหล่งที่มา

วิธีให้ความกว้างเป็นศูนย์?

— mrtsherman

8

@mrtsherman: ความกว้างเป็นศูนย์หมดกำลังใจ: ผู้อ่านหน้าจอหลายคน (ที่ใช้โดยผู้ใช้ที่ตาบอดหรือผู้ที่มีสายตาเลือนราง) จะยังคงอ่านเนื้อหาที่ 'ซ่อนอยู่' ด้วยวิธีนี้ซึ่งอาจสร้างความสับสนให้พวกเขา ไม่น่าจะมีให้ในเวลานี้ การใช้การมองเห็น css: การซ่อนเป็นวิธีที่จะไปที่นี่

— BrendanMcK

คุณสามารถบันทึกความสูงแบบไดนามิกก่อนที่จะ fadeIn และ fadeOut elems ของคุณ => ดูที่ชั้นล่าง (ฉันกำลังใช้มันในลูปผลิตภัณฑ์) $ ('. หรือ -woo-bt'). parent (). parent (). parent () ). โฮเวอร์ (ฟังก์ชัน () {// รักษาพื้นที่; var rightHeight = $ (นี่) .height (); $ (นี่) .css ('สูง', rightHeight); // ซ่อน; $ (นี่) .parent ( ) .parent (). find ('a span.family-price'). fadeOut ();}, function () {// Show; $ (this) .parent (). parent (). find ('a span .family-price '). fadeIn (' slow ');});

— Olivier

296

แทนที่จะhide()ใช้:

css('visibility','hidden')

hide()ตั้งค่าdisplayสไตล์เป็นnoneซึ่งจะลบองค์ประกอบออกจากโฟลว์เอกสารอย่างสมบูรณ์และทำให้ไม่ใช้พื้นที่

visibility:hidden เก็บพื้นที่ตามที่มันเป็น

— Dr.Molle
แหล่งที่มา

82

css('visibility','visible')

— Dr.Molle

1

หรือcss('visibility', '')

— Anthony McGrath

40

ลองตั้งค่าvisibilityเพื่อhidden:

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

— ชาดเลวี่
แหล่งที่มา

19

display: none;จะนำเนื้อหานั้นออกจากการไหลของเนื้อหาดังนั้นคุณจะเห็นเนื้อหาอื่นของคุณย้ายเข้าสู่พื้นที่ว่างที่เหลืออยู่ ( display: block;นำมันกลับสู่การไหลผลักทุกอย่างออกไป)

visibility: hidden;จะทำให้มันอยู่ในการไหลของเนื้อหาที่ใช้พื้นที่ แต่เพียงทำให้มองไม่เห็น ( visibility: visible;จะเปิดเผยอีกครั้ง)

คุณจะต้องการใช้visibilityถ้าคุณต้องการให้เนื้อหาของคุณไม่เปลี่ยนแปลง

— สปาร์ก
แหล่งที่มา

15

ในคำตอบอีกข้อสังเกตว่า jQuery fadeToไม่ได้ตั้งค่าdisplay:noneให้เสร็จสมบูรณ์ดังนั้นอาจมีวิธีแก้ปัญหาที่นี่แทนที่จะใช้fadeOutตัวอย่าง:

jQuery ซ่อน div โดยไม่รบกวนส่วนที่เหลือของหน้า

— lunelson
แหล่งที่มา

7

ก่อนหน้านี้ฉันใช้opacity: 0ก่อนที่ฉันจะเห็นvisibility: hiddenเคล็ดลับ

แต่ในหลายกรณีopacity: 0มีปัญหาเพราะช่วยให้คุณสามารถโต้ตอบกับองค์ประกอบได้แม้ว่าคุณจะไม่เห็นก็ตาม! (ดังที่DeadPassive ระบุไว้)

โดยปกตินั่นไม่ใช่สิ่งที่คุณต้องการ แต่บางทีคุณอาจจะเป็นครั้งคราว?

— joeytwiddle
แหล่งที่มา

1

คุณไม่สามารถโต้ตอบกับองค์ประกอบที่ซ่อนอยู่ในขณะที่คุณสามารถทำได้ด้วยองค์ประกอบที่มีความทึบ 0

— DeadPassive

@feskr หากคุณสามารถนึกถึงสถานการณ์ที่มันจะเป็นประโยชน์โปรดแบ่งปัน!

— joeytwiddle

@ Joetwiddle ฉันสะดุดเมื่อคุณตอบ ฉันต้องการป้องกันการมีปฏิสัมพันธ์กับองค์ประกอบในบางสถานะในขณะที่รักษาพื้นที่ไว้ ฉันตระหนักถึงความจริงที่ว่าทัศนวิสัย: ซ่อนจะช่วยรักษาพื้นที่ แต่ไม่รู้ว่ามันจะป้องกันการมีปฏิสัมพันธ์

— feskr