JQuery slaydı yukarı konumda olduktan sonra bu sınıfı nasıl kaldırırım?

Question

Şu anda jQuery slaydı için aşağıdaki kodu ayarlayın.

$(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'); 
     } 
    }); 
}); 

Ve html: Ben # slayt geçiş tıkladığınızda

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

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

, sınıf 'etkin' uygulanmış olur ve div.slide-konteyner içeriğini ve başka bir bağlantı ortaya aşağı kayar konteyneri tekrar yukarı kaydırmak için (ör. # sürgü). Bir # kaydırmayı tıklattığımda, kap yukarı doğru kaydırılır, ancak # kaydırma geçişi, uygulanan sınıfa "etkin" kalır.

Bunu istiyorum, # kaydırmaya tıkladığımda, 'active' sınıfı kaldırılır. Bunu nasıl yapabilirim?

$(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

Sadece #slide-up düğmesi için işleyici sınıfı kaldırmak animasyon tamamlanana kadar, bir geri aramada yapın:

Yorumunuza İlişkin

$('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

sadece eklemek -edit-: bunu beklemek istiyorsanız

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

ya:

$(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'); 
     } 
    }); 
});