ट्विटर बूटस्ट्रैप सामग्री को टॉगल करने के लिए कक्षाएं प्रदान करता है, https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fdd6/less/utilities.less देखें ।
मैं jQuery के लिए पूरी तरह से नया हूं, और उनके डॉक्स पढ़ने के बाद मैं ट्विटर बूटस्ट्रैप + jQuery के संयोजन के लिए एक और समाधान पर आया।
सबसे पहले, किसी अन्य तत्व (वर्ग wsis- टॉगल) पर क्लिक करते समय, एक तत्व (वर्ग wsis-पतन) को 'छिपाने' और 'दिखाने' के लिए .toggle का उपयोग करना है ।
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle();
});
});
आपने पहले ही .wsis-collapseट्विटर बूटस्ट्रैप (V3) वर्ग का उपयोग करके तत्व को छिपा दिया है .hidden:
.hidden {
display: none !important;
visibility: hidden !important;
}
जब आप क्लिक करते हैं .wsis-toggle, तो jQuery इनलाइन शैली जोड़ रहा है:
display: block
वजह से !importantट्विटर बूटस्ट्रैप में, इस इनलाइन शैली, कोई प्रभाव नहीं है तो हम हटाने की जरूरत .hiddenवर्ग है, लेकिन मैं सुझाव नहीं देंगे .removeClassइस के लिए! क्योंकि जब jQuery फिर से कुछ छिपाने जा रहा है, तो यह एक इनलाइन शैली भी जोड़ रहा है:
display: none
यह ट्विटर बूटस्ट्रैप के .hidden वर्ग के समान नहीं है, जिसे AT (स्क्रीन रीडर) के लिए अनुकूलित किया गया है। इसलिए, यदि हम छिपे हुए div को दिखाना चाहते हैं, तो हमें .hiddenट्विटर बूटस्ट्रैप की कक्षा से छुटकारा पाने की आवश्यकता है , इसलिए हमें महत्वपूर्ण कथनों से छुटकारा मिल जाता है, लेकिन यदि हम इसे फिर से छिपाते हैं, तो हम चाहते हैं कि .hiddenकक्षा फिर से वापस आ जाए! हम इसके लिए [.toggleClass] [3] का उपयोग कर सकते हैं।
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
});
});
इस तरह आप हर बार सामग्री छिपाए जाने के बाद छिपे हुए वर्ग का उपयोग करते रहते हैं।
.showटीबी में वर्ग वास्तव में jQuery के इनलाइन शैली के समान है, दोनों 'display: block'। लेकिन अगर .showकिसी बिंदु पर वर्ग अलग होगा, तो आप बस इस वर्ग को भी जोड़ देंगे:
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
});
});