toggle 开关按钮实现

许多业务需要状态按钮即常用的开关按钮，显示布尔类型的状态是最好不过的啦

开关按钮 小栗子

<style>
#toggle{
        width: 170px;
        height: 100px;
        border-radius: 50px;
        position: relative;
    }
    #toggleMenu{
        width: 96px;
        height: 96px;
        border-radius: 48px;
        position: absolute;
        background: white;
        box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
    }
    .open1{
        background: rgba(0,184,0,0.8);
    }
    .open2{
        top: 2px;
        right: 1px;
    }
    .close1{
        background: rgba(255,255,255,0.4);
        border:3px solid rgba(0,0,0,0.15);
        border-left: transparent;
    }
    .close2{
        left: 0px;
        top: 0px;
        border:2px solid rgba(0,0,0,0.1);
    }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>apple button</title>
</head>
<body>
    <div id="toggle" class="open1">
        <div id="toggleMenu" class="open2"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    window.onload=function(){
        var div2=document.getElementById("toggleMenu");
        var div1=document.getElementById("toggle");
        div2.onclick=function(){
            div1.className=(div1.className=="close1")?"open1":"close1";
            div2.className=(div2.className=="close2")?"open2":"close2";
          if(div1.className=="close1"){//toggle 关闭状态 切换
            console.log("关闭点击");
            //...
          }else{//toggle 打开状态 切换
            console.log("打开点击");
           //...
          }
        }
    }
</script>

效果图

posted @ 2019-07-04 15:30  Letyo  阅读(900)  评论(0)    收藏  举报