JavaScriptは要素を隠すだけです

Question

私は矢印をクリックすると非表示にできるソーシャルなサイドバーを作りたいと思っています。余白左に隠れています。私はクラスのif文をトグルしようとしましたが、それは隠すだけで、2回目のクリック後には表示されません。これが今の私のコードです：

のjavascript-のjQuery：

$(".socialArrow").click(function() { 
    $(".arrowLeft").toggleClass("fa-angle-left fa-angle-right"); 
}); 
var wrapper = document.getElementById("socialWrapper"); 
$(".fa-angle-left").click(function() { 
    wrapper.style.marginLeft = ("-80px"); 
}); 

$(".fa-angle-right").click(function() { 
    wrapper.style.marginLeft = ("0px"); 
}); 

HTML：

<div class="socialContainer"> 
    <ul id="socialWrapper"> 
     ...some links... 
    </ul> 

    <span class="socialArrow"> 
     <i class="arrowLeft fa fa-angle-left"></i> 
    </span> 

</div> 

それを修正するためにどのように任意のアイデア？

私の英語は申し訳ありませんが、私は英国/米国ではありません。

Answer 1

それはtoggleClassで動作するはず、この方法：

$(".socialArrow").click(function() { 
    $("#socialWrapper").toggleClass("closed"); 
}); 

とCSS：

#socialWrapper.closed { 
    margin-left: -80px; 
} 

Answer 2

だから最初の$（ "FA-角度右"）セレクタを実行すると、そこにありますそのようなクラス項目はまだないので、click（）は何にも適用されません。後でそのクラスを持つ要素を作成します。したがって、クラス変更後にclick（）割り当てを再実行する必要があります。 Like：

function setClick() { 
    $(".fa-angle-left").click(function() { 
     wrapper.style.marginLeft = ("-80px"); 
    }); 
    $(".fa-angle-right").click(function() { 
     wrapper.style.marginLeft = ("0px"); 
    }); 
} 

$(".socialArrow").click(function() { 
    $(".arrowLeft").toggleClass("fa-angle-left fa-angle-right"); 
    setClick(); 
}); 

var wrapper = document.getElementById("socialWrapper"); 

このようにして、クリックイベントはクラスが変更されるたびにリセットされます。