jQuery與隱藏和顯示

Question

我沒有得到如何告訴我的功能，如果我再次點擊打開的選項卡上，關閉並停止動畫。我現在的問題是我的選項卡關閉，並重做.show（）操作。這裏有一個小提琴給你看; http://jsfiddle.net/X2dsS/1/

$('.lst-cours .extrainfo').hide() 
$('.lst-cours').click(function(){ 
    $('.lst-cours .extrainfo').hide("slow") 
    $('.lst-cours .extrainfo').removeClass("active") 
    $(this).children().find('.extrainfo').show("slow").addClass('active') 
}); 

Answer 1

你需要一些小的變化 請參閱下面的代碼：

$('.lst-cours .extrainfo').hide() 
$('.lst-cours').click(function(){ 
    if($(this).children().find('.extrainfo').is(":visible")) 
    { 
     $('.lst-cours .extrainfo').hide("slow"); 
     $('.lst-cours .extrainfo').removeClass("active"); 
    } 
    else 
    { 
     $('.lst-cours .extrainfo').hide("slow"); 
     $('.lst-cours .extrainfo').removeClass("active"); 
    $(this).children().find('.extrainfo').show("slow").addClass('active'); 
    } 

    }); 

Answer 2

所以，這一切的一切，你需要添加一個if語句來檢查類，但你需要做這個，你做任何隱藏和顯示之前。然後保存該值。以下是代碼運行良好，包括一個額外的stop命令，這將防止nimation重複一遍又一遍。

$('.lst-cours').click(function(){ 
    var clickElement = $(this).children().find('.extrainfo'); 
    var hideOnly = clickElement.hasClass("active"); 

    $('.lst-cours .extrainfo').stop(); 
    $('.lst-cours .extrainfo.active').hide("slow"); 
    $('.lst-cours .extrainfo.active').removeClass("active");   

    if (!hideOnly){ 
     clickElement.show("slow").addClass('active'); 
    } 
}); 

見琴：http://jsfiddle.net/2Lqtp/4/