Javascript только скрывает элемент

Question

Я хочу создать социальную боковую панель, которая может быть скрыта при нажатии на стрелку. Она скрывается по краю слева. Я пытался переключать классы, если операторы, но он только скрывает его и не отображается после второго щелчка. Это мой код прямо сейчас:

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

Так что, когда первый $ ("фа-угол правый") работает селектор, есть нет такого элемента класса, поэтому click() не применяется ни к чему. Вы создадите элемент с этим классом позже. Таким образом, вам действительно нужно повторно запустить эти настройки click() после изменения вашего класса. Нравится:

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"); 

Таким образом, событие click изменяется при каждом изменении классов.