html按钮设置两种状态,js实现点击一个按钮进行两种状态的切换（toggle）

Document

*{

margin: 0;

padding: 0;

}

body{

width: 100%;

overflow: hidden;

}

#leftMenu {

/*position: absolute;*/

height: 100%;

width: 200px;

background: rgba(0, 0, 0, 0.5);

transition: all 0.5s;

transform: translateX(-200px);

}

#leftMenu > ul {

list-style: none;

}

#leftMenu > ul > li {

margin-top: 5px;

height: 50px;

line-height: 50px;

background-color: pink;

color: #fff;

}

#main {

width: 100%;

height: 100%;

background: blue;

/*position: absolute;*/

transition: all 0.5s;

}

• 首页
• 首页#
• 首页

var leftMenu = document.querySelector(‘#leftMenu‘);

var btn = document.querySelector(‘#btn‘);

var main = document.querySelector(‘#main‘);

var falg = true;

btn.addEventListener(‘click‘,function(){

if(falg){

leftMenu.style.transform = "translateX(0px)";

main.style.transform = "translateX(200px)";

falg=false;

}else{

leftMenu.style.transform = "translateX(-200px)";

main.style.transform = "translateX(0px)";

falg=true;

}

})

原文：http://www.cnblogs.com/songdongdong/p/6218683.html