所以我尝试了各种 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");
});
<强> Updated Fiddle
关于javascript - 当关闭屏幕菜单打开时,基础使箭头与其他类切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35922428/