पेज लेआउट में अपने स्थान को संरक्षित करते हुए jQuery छिपाने तत्व

Question

क्या jQuery में एक तरीका है जहां मैं एक तत्व छिपा सकता हूं, लेकिन जब यह छिपा हुआ है तो डोम को बदल नहीं सकता है? मैं एक निश्चित तत्व को छिपा रहा हूं लेकिन जब यह छिपा होता है, तो इसके नीचे के तत्व ऊपर चले जाते हैं। मैं नहीं चाहता कि ऐसा हो। मैं चाहता हूं कि अंतरिक्ष वही रहे, लेकिन जिस तत्व को दिखाया जाएगा उसे छिपाया जाएगा।

क्या मैं यह कर सकता हूं?

Comments

कैसे इसे शून्य चौड़ाई देने के बारे में?

— मथर्समैन

@mrtsherman: शून्य चौड़ाई को हतोत्साहित किया जाता है: कई स्क्रीन-रीडर (उपयोगकर्ताओं द्वारा उपयोग किए जाने वाले जो अंधे हैं या जिनके पास कम दृष्टि है) अभी भी इस तरह से 'छिपी हुई' सामग्री को पढ़ेंगे, जो उन्हें संभवतः सामग्री के रूप में भ्रमित कर सकते हैं। ' इस समय पर उपलब्ध होना चाहिए। सीएसएस दृश्यता का उपयोग करना: छिपाना यहां जाने का तरीका है।

— ब्रेंडनएमसीके

आप fadeIn से पहले ऊँचाई को गतिशील रूप से सहेज सकते हैं और अपने elems = fadeOut को देख सकते हैं => नीचे देखें (मैं इसका उपयोग उत्पादों लूप में कर रहा हूँ।) $ ('। Or-woo-bt')। माता-पिता ()। माता-पिता () ) .होवर (फंक्शन () {// प्रोटेक्ट स्पेस; वर राइटहाइट = $ (यह) .हाइट (); $ (यह) .सीएस ('हाइट', राइटहाइट); // हाइड; $ (यह) .परेंट ) .परेंट ()। Find ('a span.family-price')। fadeOut ();}, फंक्शन () {// शो; $ (यह) .parent ()। पेरेंट ()। एक स्पैन .family-price '); fadeIn (' slow ');});

— ओलिवियर

Answer 1

इसके बजाय hide(), उपयोग करें:

css('visibility','hidden')

hide()displayशैली को सेट करता है none, जो दस्तावेज़ प्रवाह से तत्व को पूरी तरह से हटा देता है और इसके कारण जगह नहीं लेता है।

visibility:hidden अंतरिक्ष को वैसा ही रखता है जैसा वह है।

Comments

css('visibility','visible')

— डॉ। मोल

याcss('visibility', '')

— एंथनी मैकग्राथ

Answer 2

सेट करने का प्रयास visibilityकरने के लिए hidden:

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

Answer 3

display: none;यह सामग्री प्रवाह से बाहर ले जाएगा ताकि आप अपने अन्य सामग्री को पीछे छोड़ दिए गए खाली स्थान में चले जाएँ। ( display: block;यह सब कुछ रास्ते से बाहर धकेलते हुए प्रवाह में वापस लाता है।)

visibility: hidden;इसे अंतरिक्ष में ले जा रहे सामग्री प्रवाह के भीतर रखेंगे, लेकिन बस इसे अदृश्य बना देंगे। ( visibility: visible;इसे फिर से प्रकट करेंगे।)

visibilityयदि आप चाहते हैं कि आपकी सामग्री का प्रवाह अपरिवर्तित रहे, तो आप इसका उपयोग करना चाहते हैं।

Answer 4

एक अन्य जवाब में यह नोट किया गया है कि jQuery के पूरा होने पर fadeToसेट नहीं होता है display:noneइसलिए fadeOutउदाहरण के लिए उपयोग करने के बजाय यहां एक समाधान भी प्रदान कर सकता है :

jQuery, पृष्ठ के बाकी हिस्सों को परेशान किए बिना एक div छिपाएं

Answer 5

मैंने पहले चाल opacity: 0देखा था visibility: hidden।

लेकिन कई मामलों opacity: 0में समस्याग्रस्त है, क्योंकि यह आपको तत्व के साथ बातचीत करने देता है , भले ही आप इसे नहीं देख सकते हैं! (जैसा कि डेडपेसिव द्वारा बताया गया है ।)

आमतौर पर वह नहीं होता जो आप चाहते हैं। लेकिन शायद कभी-कभार हो सकता है?

Comments

आप एक छिपे हुए तत्व के साथ बातचीत नहीं कर सकते, जबकि आप 0 अपारदर्शिता वाले तत्व के साथ कर सकते हैं।

— डेडपासिव

@feskr यदि आप ऐसी स्थिति के बारे में सोच सकते हैं जहां यह लाभप्रद होगा, तो कृपया साझा करें!

— joeytwiddle

@joeytwiddle मैं आप जवाब पर ठोकर खाई। मुझे एक निश्चित स्थिति में एक तत्व के साथ बातचीत को रोकने की आवश्यकता थी, जबकि यह अंतरिक्ष को संरक्षित करता है। मुझे इस तथ्य के बारे में पता था कि दृश्यता: छिपी हुई जगह को संरक्षित करेगी, लेकिन यह नहीं जानती थी कि यह बातचीत को रोक देगा।

— feskr