अभिभावक छुपा लेकिन बच्चे अभी भी दिखाई दे रहे हैं (मैं उन्हें दिखाना नहीं चाहता)!

Question

ठीक है, तो मुझे एक ऐसी स्थिति थी जहां मुझे कुछ क्लोन डीओएम तत्वों को एक वेब पेज में एक मूल डीआईवी तत्व में जोड़ने की आवश्यकता थी।

मेरे पास इनमें से चार मूल डीआईवी धारक थे। जब मैं दृश्यता से छिपे हुए दृश्यता स्विच को बदलता हूं, तो वास्तव में अजीब चीजें होती हैं: पोस्ट पेज लोड के सभी बच्चे जोड़े दिखाई देते हैं!

यहाँ स्रोत कोड डाउनलोड करने के लिए एक कड़ी है: http://www.clarencebowman.com/parent-child-visibility/parent-child-visibility.zip

और यहाँ घटना पहले हाथ देखने के लिए एक कड़ी है: http://www.clarencebowman.com/parent-child-visibility

आप क्या देखेंगे कुछ मैजंटा साथ एक लाल बक्सा है पेज तत्व लोड करने के बाद इसमें बाल तत्व जोड़े गए। पृष्ठ के नीचे एक शो/छुपा बटन है।

मैंने माता-पिता डीआईवी में एक हरा पट्टी जोड़ा ताकि यह दिखाया जा सके कि उसके बाल तत्व वास्तव में इसकी दृश्यता को सही तरीके से प्राप्त करते हैं।

लेकिन क्लोन किए गए बच्चे तत्वों को जोड़ने के बाद और फिर पैरेंट डीआईवी को छुपाएं, क्लोन किए गए बच्चे तत्वों में से कोई भी गायब नहीं हो जाता है!

मैंने डुप्लिकेटिंग स्क्रिप्ट चलाने से पहले बच्चे को मूल डीआईवी के अंदर क्लोन करने की कोशिश की है ... इससे कोई फर्क नहीं पड़ता।

किसी भी बच्चे के तत्वों को पोस्ट पेज लोड जोड़ रहे हैं .....

किसी को भी किसी और अनुभव इस किसी भी तरह माता पिता DIV तत्व (लाल बॉक्स) के साथ उनकी विरासत लिंक खो दिया है लगता है? क्या बच्चों की विरासत की मरम्मत/प्रतिस्थापन/पुनः असाइन करने का कोई आसान तरीका है?

मैं jQuery 1.5 का उपयोग कर रहा हूं।

Answer 1

आप माता-पिता पर display: none उपयोग नहीं कर रहे (बच्चों को प्रभावित करती है जो), आप माता-पिता पर visibility: none उपयोग कर रहे हैं, और बच्चों के भीतर एक visibility: visible सीएसएस विशेषता है। यदि आप बच्चों को छिपाना चाहते हैं, तो उन्हें visible: hidden भी सेट करें, या मूल तत्व पर display: none का उपयोग करें।

तो, जैसा कि केली ने बताया, आप $('#parent_div').toggle(); का उपयोग कर सकते हैं, जो आसानी से display: none#parent_div पर लागू होगा।

मैं बस visibility और display समान नहीं जोड़ूंगा। उदाहरण के लिए, एक तत्व है अगर width: 10px, height: 10px, visibility तत्व के आयामी अंतरिक्ष को बरकरार रखे हुए (यह अभी भी width: 10px, height: 10px तक ले जाता है), जबकि display: none पूरी तरह से माता पिता तत्व (width: 0, height: 0) से तत्व के आयामों को हटा। Visibility का मतलब है कि यह अभी भी अन्य प्रभावित तत्वों के संबंध में प्रवाह पर दृश्यता का प्रतिनिधित्व करता है, यह अभी नहीं देखा गया है; display का अर्थ है कि यह अन्य प्रदर्शित/दृश्य तत्वों के संबंध में स्क्रीन पर नहीं देखा गया है और न ही प्रदर्शित किया गया है।

Answer 2

दृश्यता को हटाएं: बच्चों से दृश्यमान संपत्ति। इससे आपकी समस्या ठीक हो जाएगी। आप डिस्प्ले को सेट करने के बजाय माता-पिता पर .hide() और .show() (या .toggle()) का उपयोग कर सकते हैं।

Answer 3

कई अन्य लोगों ने केवल display: none का उपयोग करने का उल्लेख किया है, लेकिन जैसा कि आप जानते हैं कि visibility संपत्ति का उपयोग करने से इसकी पूरी तरह से अलग व्यवहार है।

एक चीज जो आप कर सकते हैं hidden/inherithidden/visible के बजाय उपयोग करना है। inherit डिफ़ॉल्ट रूप से एक तत्व को दृश्यमान होने का कारण बनता है, जब तक कि उसके माता-पिता में से कोई एक नहीं है। आप जो चाहते हैं वह है।

Answer 4

कुछ मामलों में आप यहां सुझाए गए दो समाधानों का उपयोग नहीं कर सकते हैं।

उदा। display: none काम नहीं करेगा क्योंकि तत्व छिपाने के दौरान प्रस्तुत होने पर इसकी चौड़ाई और ऊंचाई को जानने की आवश्यकता है। visibility: hidden काम नहीं कर सकता है यदि आपके पास बच्चों का नियंत्रण नहीं है और visiblity:inherit उन्हें नहीं जोड़ सकता है।

उन मामलों में आप opacity: 0 को z-index:-1 के साथ जोड़ सकते हैं ताकि तत्वों को दृष्टि से छुपाया जा सके (केवल याद रखें कि वे अभी भी वहां होंगे और क्लिक करने योग्य आदि होंगे)।