の表示/非表示サイドバーメニューとスライド効果とCOLのサイズを拡張するには、

Question

私はので、私は作られたブートストラップ・サイドバーラッパーのための多くの方法が好きではない私の1が、私はいくつかの助けが必要です

$('.hidee').click(function(){ 

    $('.c1').removeClass('col-md-2').addClass('col-md-1'); 
    $('.c2').removeClass('col-md-10').addClass('col-md-11'); 
    $('.hidee').removeClass('hidee').addClass('showw'); 

}); 
$('.showw').click(function(){ 

    $('.c1').removeClass('col-md-1').addClass('col-md-2'); 
    $('.c2').removeClass('col-md-11').addClass('col-md-10'); 
    $('.showw').removeClass('showw').addClass('hidee'); 
}); 

私がして、新しいクラスを追加コンソールを使用して私は新しいクラスを持っていることがわかりますが、その新しいクラスのボタンをクリックすると動作しません... また、2列のサイズを変更するとhide/showのように見えます。

UPDATE：

私はリサイズのためのこの最初の部分をしましたが、今私はそれが可能であればスライド少しのための効果を必要としています。

全コード：

$('.sh').click(function(){ 
var sh = $(this).attr('sh'); 
if(sh=="hide"){ 
    $('.c1').removeClass('col-md-2').addClass('col-md-1'); 
    $('.c2').removeClass('col-md-10').addClass('col-md-11'); 
    $('.sh').attr('sh','show'); 
    $('.sh').html('Show'); 
}else if(sh=="show"){ 

    $('.c1').removeClass('col-md-1').addClass('col-md-2'); 
    $('.c2').removeClass('col-md-11').addClass('col-md-10'); 
    $('.sh').attr('sh','hide'); 
    $('.sh').html('Hide'); 

}else{} 
}); 

<button class="btn btn-default sh" sh="hide" style="float: right; margin-top: 0; margin-right: -1em;">Hide</button> 

そして、私は2つの列を持っています。

Answer 1

をDOMに新しく追加された要素のために動作しますこれで試してみてください：

div { 
    -webkit-transition: width 0.3s ease; 
    -moz-transition: width 0.3s ease; 
    -o-transition: width 0.3s ease; 
    transition: width 0.3s ease; 
} 

また、 "showw"クラスを動的に作成しているので、ドキュメント上にバインドできないように、clickイベントをドキュメントにバインドする必要があります。

$(document).on('click', '.hidee', function() { 
    $('.c1').removeClass('col-md-2').addClass('col-md-1'); 
    $('.c2').removeClass('col-md-10').addClass('col-md-11'); 
    $('.hidee').removeClass('hidee').addClass('showw'); 
}) 

$(document).on('click', '.showw', function() { 
    $('.c1').removeClass('col-md-1').addClass('col-md-2'); 
    $('.c2').removeClass('col-md-11').addClass('col-md-10'); 
    $('.showw').removeClass('showw').addClass('hidee'); 
}); 

は働い例えばhttps://codepen.io/anon/pen/zKxBwNを参照してください。

Answer 2

クリック後にクラスを追加すると、既存の関数が読み込まれたDOMに読み込まれます。

例えばdiv要素、それはあなたがリサイズしている要素にCSSトランジションを追加する必要があります

$(document).on('click','.showw',function(){ 

});