Klasse entfernen/hinzufügen, wenn sie auf Toggle basiert

Question

Ich habe eine Spalte, die auf einer click Funktion nach links verschoben wird. Ich füge dann die Klasse von w zum Behälter hinzu, um seine Breite zu ändern, sobald die Spalte heraus gleitet. Was ich versuche zu tun ist, fügen Sie die Klasse e, wenn es wieder einschiebt und dann entfernen Sie die Klasse w durch das Einschließen in die toggle Funktionen, aber der Container enthält immer noch die Klasse w und wird nicht die Klasse e hinzufügen . Gedanken?

FIDDLE: http://jsfiddle.net/QDUQk/1926/

.container { 
    border: 1px solid #000; 
    width: 200px; 
} 

.container.e { 
    width: 80%; 
} 

.container.w { 
    width: 100%; 
} 

<div class="togl">Menu</div> 
<div class="col"> 
    SLIDE ME SLIDE ME PLX PLX 
</div> 
<div class="container"> 
</div> 

$('.togl').click(function() { 
    if ($('.container').is(':visible')) { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $('.container').addClass('w'); 
     $('.container').removeClass('e'); 
    }); 
    } else { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $(".container").removeClass('w'); 
     $(".container").addClass('e') 
    }); 
    } 
}); 

Answer 1

Die Sichtbarkeit von .container nicht von true ändern. Prüfen Sie, ob "w"className bei .is()

$('.togl').click(function() { 
    if (!$('.container').is('.w')) { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $('.container').addClass('w'); 
     $('.container').removeClass('e'); 
    }); 
    } else { 
    $('.col').toggle('slide', { 
     direction: 'left' 
    }, 1000, function() { 
     $(".container").removeClass('w'); 
     $(".container").addClass('e') 
    }); 
    } 
}); 

jsfiddle http://jsfiddle.net/QDUQk/1927/

Answer 2

Ihre Container Sichtbarkeit ändert sich nicht auf Mausklick. Versuchen Sie folgende,

$('.togl').click(function() { 
    if ($('.container').hasClass('e')) { 
     $('.col').toggle('slide', { 
         direction: 'left' 
     }, 1000, function() { 
    $('.container').addClass('w'); 
    $('.container').removeClass('e'); 
    }); 
} else { 
$('.col').toggle('slide', { 
    direction: 'left' 
}, 1000, function() { 
    $(".container").removeClass('w'); 
    $(".container").addClass('e') 
}); 
}});