当关闭屏幕菜单打开时，基金会可以与其他班级切换箭头

Question

So I've tried various javascript functions and toggle options to try and make the button switch from the right arrow to the left.

.arrow-right {
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid white;
  margin-left:10px;

}

.arrow-left {
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 30px solid white;
transform: 

The javascript I used to do this was

$('#showhide').click(function() {
    $(this).toggleClass('arrow-left');
});

You can see the issue I'm running into in jsfiddle

http://jsfiddle.net/bbarclay6/qbnc1jn7/7/

Any help is great and awesome :)

Answer 1

You don't need two classes. All you need to do is set the transform to 180deg and none depending on the action:

//Rotate by 180 degrees when "showhide" is clicked i.e. when opening.
$('#showhide').click(function() {
  $(this).css("transform", "rotate(180deg)");
});

//Remove the transform when the "exit-off-canvas is clicked i.e. when closing. 
$('.exit-off-canvas').click(function() {
  $('#showhide').css("transform", "none");
});

Updated Fiddle