jquery स्लाइड ऊपर की स्थिति में होने के बाद मैं इस कक्षा को कैसे हटा सकता हूं?

Question

वर्तमान में मेरे पास एक jQuery स्लाइड के लिए निम्न कोड स्थापित है।

$(document).ready(function() { 
    $('a#slide-up').click(function() { 
     $('.slide-container').slideUp(); 
     return false; 
    }); 
    $('a#slide-toggle').click(function() { 
     if ($('.slide-container').is(':visible')) { 
      $('.slide-container').slideUp(); 
      $(this).removeClass('active'); 
     } else { 
      $('.slide-container').slideDown(); 
      $(this).addClass('active'); 
     } 
    }); 
}); 

और एचटीएमएल:

<a id="slide-toggle"></a> 

<div class="slide-container"> 
    <a id="slide-up"></a> 
    >>content<< 
</div> 

जब मैं # स्लाइड टॉगल पर क्लिक करें, वर्ग 'सक्रिय' यह करने के लिए लागू किया जाता है और div.slide-कंटेनर सामग्री और एक अन्य लिंक खुलासा नीचे स्लाइड कंटेनर बैक अप स्लाइड करने के लिए (यानी एक # स्लाइड-अप)। जब मैं # स्लाइड-अप पर क्लिक करता हूं, तो कंटेनर बैक अप लेता है लेकिन # स्लाइड-टॉगल उस पर लागू कक्षा के साथ "सक्रिय" रहता है।

मुझे यह चाहिए कि जब मैं # स्लाइड-अप पर क्लिक करता हूं, तो 'सक्रिय' वर्ग हटा दिया जाता है। मैं यह कैसे कर सकता हूँ?

-edit-

$(document).ready(function() { 
    $('a#slide-up').click(function() { 
     $('.slide-container').slideUp(function(){ 
      $('#slide-toggle').removeClass('active'); 
     }); 
     return false; 
    }); 

    $('a#slide-toggle').click(function() { 
     if ($('.slide-container').is(':visible')) { 
      $('.slide-container').slideUp(function() { 
      $(this).removeClass('active'); 
      } 
     }) 
     else { 
      $('.slide-container').slideDown(); 
      $(this).addClass('active'); 
     } 
    }); 
}); 

Answer 1

बस #slide-up बटन के लिए हैंडलर में वर्ग निकालें:

$('a#slide-up').click(function() { 
    $('.slide-container').slideUp(); 
    $('#slide-toggle').removeClass('active'); 
    return false; 
}); 

या यदि आप इसे इंतजार करना चाहते हैं जब तक एनीमेशन पूरा नहीं हो जाता है, इसे कॉलबैक में करें:

$('a#slide-up').click(function() { 
    $('.slide-container').slideUp(function(){ 
     $('#slide-toggle').removeClass('active'); 
    }); 
    return false; 
}); 

---

अपनी टिप्पणी के बारे में:

$('a#slide-toggle').click(function() { 
     // keep a reference to the slide-toggle element 
    var slideToggle = this; 
    if ($('.slide-container').is(':visible')) { 
     $('.slide-container').slideUp(function() { 
      $(slideToggle).removeClass('active'); // remove class from slide-toggle 
     }); // <-- moved the closing) to here 
    }  // <-- instead of here 
    else { 
     $('.slide-container').slideDown(); 
     $(slideToggle).addClass('active'); // add class to slide-toggle 
    } 
}); 

Answer 2

सिर्फ जोड़ें:

$(document).ready(function() { 
    $('a#slide-up').click(function() { 
     $('.slide-container').slideUp(); return false;}); 
    $('a#slide-toggle').click(function() { 

     // removing active class for active element 
     $('a.active').removeClass('active'); 

     if ($('.slide-container').is(':visible')) { 
      $('.slide-container').slideUp(); 
     } 
     else { 
      $('.slide-container').slideDown(); 
      $(this).addClass('active'); 
     } 
    }); 
});