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

当屏幕菜单打开时，基础与其他类别进行箭头切换

1 个答案: