html - Toggling classes using jQuery -


मेरे पास एक पॉपअप तत्व है:

  & lt; div id = "contactme" वर्ग = "बंद" & gt; & Lt; a href = "जावास्क्रिप्ट: शून्य (0);" onclick = "toggle_contactme" & gt; बंद & lt; / a & gt; & Lt; / div & gt; & Lt; a href = "जावास्क्रिप्ट: शून्य (0);" onclick = "toggle_contactme" & gt; ओपन & lt; / a & gt;  

मैंने दो वर्गों .open और .closed प्रत्येक बना दिया है सीएसएस के साथ:

<पूर्व> । बंद {दृश्यता: छुपा; }। Open {दृश्यता: दृश्यमान; }

jQuery का उपयोग करके मुझे पॉपअप को खोलने और बंद करने में त्रुटियां मिलीं हैं, और मुझे यकीन है कि यह सीएसएस या सिर्फ गलत jQuery है।

यहाँ है फ़ंक्शन टॉगल_ संपर्क () {if ($ ("# contactme") हैक्लास ("बंद")) {$ ("# contactme" ) .removeClass ( "बंद") addClass ( "खुला")। } और अगर ($ ("# संपर्क")। हैक्लास ("खुली")) {$ ("# संपर्क")। निकालेंक्लस ("खुली")। ऐडक्लस ("बंद"); }; }

यह कोड चलाते समय, यह पॉपअप को खोलता है, लेकिन इसे बंद करने में विफल रहता है, कोई मदद की सराहना की जाएगी!

पिंड:

तत्वों को पूरी तरह से छुपाने और दिखाने के लिए जिन्हें आप दृश्यता: छुपा; का उपयोग नहीं करना चाहिए। बेशक, यह तत्व छुपाता है, लेकिन यह अभी भी जगह पर कब्जा कर रहा है। आप तत्व को पूरी तरह छिपाने के लिए डिस्प्ले: कोई नहीं; का उपयोग करना चाहते हैं JQuery में इस कॉल के लिए फ़ंक्शन हैं और जो डिस्प्ले तत्व का मान सेट / अनसेट करेगा।

इस स्थिति में, जब से आप दो राज्यों के बीच टॉगल करना चाहते हैं, तो जांच लें फ़ंक्शन जो वास्तव में ऐसा करता है।

कार्य उदाहरण:

संपादन: एनिमेटेड संस्करणों के लिए, चेक आउट करें, और।

उदाहरण के लिए उदाहरण (एनिमेटेड):

HTML

  & lt; a href = "#" वर्ग = "छिपा हुआ" & gt; बंद करें & lt; / a & gt; & Lt; a href = "#" & gt; ओपन & lt; / a & gt;  

सीएसएस

 । Hidden {display: none; } {/ Code>  

jQuery

  $ (फ़ंक्शन () {$ ('a') क्लिक करें (फ़ंक्शन () {/ / $ ('ए')। टॉगल (); // यूनैनीटेड $ ('ए')। FadeToggle (); // एनिमेटेड});});  

Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -