基金会在屏幕外菜单打开时与其他类进行箭头切换

Foundation make arrow switch with other class when off screen menu opens

本文关键字：其他 屏幕 菜单 基金会      更新时间：2023-09-26

所以我尝试了各种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/

任何帮助都很棒，很棒:)

你不需要两个类。您需要做的就是根据操作将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");
});

更新的小提琴

相关文章：