jQuery - टॉगल और निकालें क्लास

Question

एक आसान, लेकिन मैं इसे समझ नहीं सकता। मेरे पास # शीर्षक नामक एक लिंक है और जब आप इसे क्लिक करते हैं तो यह # सामग्री नामक div को टॉगल करता है। यह पूरी तरह से काम करता है, लेकिन इसके अतिरिक्त मैं अपने # शीर्षक लिंक पर "सक्रिय" कक्षा जोड़ रहा हूं और मैं इसे हटा नहीं सकता, यहां तक ​​कि removeClass के साथ भी।

ऊपर कोड देखें और उदाहरण लिंक (शीर्षक केवल तभी होना चाहिए जब # सामग्री का विस्तार किया जाए, हर समय नहीं)।

$('#title').click(function() { 
    $(this).addClass('active'); 
    $('#content').toggle(); 
}), function() { 
    $(this).removeClass('active'); 
}; 

http://jsfiddle.net/vY3WY/

Answer 1

आप टॉगल के साथ टॉगल क्लास फ़ंक्शन का उपयोग कर सकते हैं।

http://jsfiddle.net/vY3WY/1/

$('#title').click(function() { 
    $(this).toggleClass('active'); 
    $('#content').toggle(); 
}); 

या आप एक और अधिक मजबूत संस्करण है जो यह सुनिश्चित करेंगे कि वर्ग जोड़ दिया जाता है, तो सामग्री दिखाई और नहीं तो हटा दिया है का उपयोग कर सकते हैं।

http://jsfiddle.net/vY3WY/6/

$('#title').click(function() { 
    $('#content').toggle(); 
    if ($('#content:visible').size() != 0) 
    { 
     $(this).addClass('active'); 
    } 
    else 
    { 
     $(this).removeClass('active'); 
    } 
}); 

Answer 2

This version works। hasClass और इसे हटाने का उपयोग कर अगर यह नहीं है 'सक्रिय' की उपस्थिति के लिए

$('#title').click(function() { 
    if($(this).hasClass('active')) { 
     $(this).removeClass('active'); 
    } else { 
     $(this).addClass('active'); 
    } 
    $('#content').toggle(); 
}); 

चेक। अगर यह नहीं है तो इसे जोड़ें।

या आप उस तर्क को छिपाने के लिए toggleClass का उपयोग कर सकते हैं।

Answer 3

एक कॉम्पैक्ट और अभी भी पठनीय (मुझे लगता है) समाधान:

$('#title').click(function() { 
    var isContentVisible=$('#content').toggle().is(':visible'); 
    $(this).toggleClass('active', isContentVisible); 
}); 

Live Demo

यह #content टॉगल और जाँच करता है कि यह बाद में दिखाई दे रहा है या नहीं। फिर यह परिणाम के आधार पर #title पर कक्षा को टॉगल करता है। एक लाइनर फ़ंक्शन भी हो सकता है, लेकिन यह तब मेरी पठनीयता अपेक्षाओं को पूरा नहीं करेगा।

Answer 4

अन्य मूल्य

$('.my').click(function() { 
if($(this).hasClass('active')) { 
    $(this).removeClass('active'); 
} else { 
    $(this).addClass('active'); 
} 
$('.my').toggle(); 

}) के साथ छिपाने वर्तमान मूल्य के लिए एक और समाधान;

here पर क्लिक करें! यह reference links के साथ भी काम करता है।

Answer 5

मुझे लगता है कि यह करने का यह सबसे उचित तरीका है।

$(this).toggleClass('active').siblings().removeClass('active');