制作拨动开关

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/

制作拨动开关

Making a toggle switch

jquery

css

toggle