Question

如何在按钮开始中间位置的情况下进行切换开关。然后单击将为左侧位置属性设置动画，以便按钮位于左侧。再次单击将重置中间位置。单击第三次将向右移动按钮。然后单击第四次将其移回中间。

HTML

<div class="toggle">
<div class="toggle-item bg"></div>
<div class="toggle-item button"></div>
</div>

CSS

.toggle{
position: relative;
margin: auto;
text-align: center;
width: 342px;
}

.toggle-item{
position: absolute;
margin: auto;
text-align: center;
}

.button{
width: 50px;
height: 50px;
left: 75px;
background-color: red;
}

.bg{
width: 200px;
height: 50px;
background-color: #000;
}

https://jsfiddle.net/cjymyzg6/

理想情况下，我想分配一个变量，因为我计划将其用作同位素网格的过滤器

Answer 1

这是一个可能的解决方案：

var pos = 1;
$('.toggle').click(function(){
    if(pos === 1){
        $('.button').css('left', '0');
    }else if(pos === 2){
        $('.button').css('left', '75px');
    }else if(pos === 3){
        $('.button').css('left', '150px');
    }else if(pos === 4){
        $('.button').css('left', '75px');
        pos = 0;
    }
    pos++;
});

变量pos保存当前位置。我还添加了一个CSS转换。

请参阅此处：https://jsfiddle.net/lmgonzalves/cjymyzg6/2/

制作切换开关

1 个答案: