javascript - 当关闭屏幕菜单打开时，基础使箭头与其他类切换

Question

所以我尝试了各种 JavaScript 函数和切换选项来尝试使按钮从右箭头切换到左箭头。

.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: 

我用来执行此操作的 JavaScript 是

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

您可以看到我在 jsfiddle 中遇到的问题

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

任何帮助都很棒:)

Answer 1

你不需要两个类。您所需要做的就是根据操作将 transform 设置为 180deg 和 none:

//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