<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <style>
        *{
            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;
        }

</style>
</head>
<body>
    <section id="leftMenu">
        <ul>
            <li>首页</li>
            <li>首页#</li>
            <li>首页</li>
        </ul>
    </section>
    <main id="main">
        <input type="button" value="menu" id="btn">
    </main>
</body>
<script>
    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;
        }
    })
</script>
</html>

js实现点击一个按钮进行两种状态的切换（toggle）的更多相关文章

  1. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  2. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  3. 简单实现一个button控制两种状态

    <button class="btn a-bgcolor" data-toggle="tooltip" data-placement="left ...

  4. javaWeb中一个按钮提交两个表单

    一个按钮提交两个表单,有时候会用到,一般会很容易想到使用 onclick="document.form1.submit();document.form2.submit();" 的方 ...

  5. 问题：asp.net 点击button按钮调到页面顶部；结果：asp.net点击一个按钮，使页面跳转到本面页上的指定位置

    asp.net点击一个按钮,使页面跳转到本面页上的指定位置 (2011-04-19 16:46:51) 转载▼ 标签: it   最近在做一个项目. 用到标题所说的功能. 实现方法: 1.在aspx中 ...

  6. thinkjs——一个字段一种数字代表两种状态

    问题来源: 现有一张company数据表,其中有一个字段state(-2:待审核:-1:禁用:0:正常:1:会员过期:),一般而言,在前期设计数据表的时候,会将每种状态下都用一种特定的数字代表,但是这 ...

  7. js 图片base64转file文件的两种方式

    js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...

  8. android带有文字的图片按钮的两种实现方式

    android带有文字的图片按钮的两种实现方式 1). TextView对Button用相对布局,这要要求按钮的背景图片要留下空白位置给文字.这种方式开发比较简单,适合做一些风格一致的Button. ...

  9. JMeter接口测试-提取动态列表最后一个值的两种方法

    前言 在用JMeter做接口测试时,我们经常会遇到,一个接口返回一个json串,在这个json串中,某个节点的值是一个列表,而且这个列表的长度是动态变化的.今天我们来学习两种提取动态列表最后一个值的两 ...

随机推荐

  1. sqlserver 分区表

    我们知道很多事情都存在一个分治的思想,同样的道理我们也可以用到数据表上,当一个表很大很大的时候,我们就会想到将表拆 分成很多小表,查询的时候就到各个小表去查,最后进行汇总返回给调用方来加速我们的查询速 ...

  2. Train Problem I hdu 1022（栈）

    http://acm.split.hdu.edu.cn/showproblem.php?pid=1022 题意:给出火车的进站与出站顺序,判断是否可以按照给出的出站顺序出站. #include < ...

  3. JDBC连接数据库(SQLServer和MySQL)配置总结

    [JDBC连接SQL Server] [准备工作] 1.下载Eclipse-JavaEE: 2.下载Tomcat8.0: 3.下载Microsoft JDBCDriver 4.1 for SQL Se ...

  4. php 解析 视频 信息 封面 标题 图片 支持 优酷, 土豆 酷6 56 新浪 qq播客 乐视 乐视

    原文地址:http://www.lianyue.org/2013/2497/ <?php /** * 解析 视频信息 类 * * 支持 优酷, 土豆 酷6 56 新浪 qq播客 乐视 乐视 ** ...

  5. 2d,3d中旋转推导

    二维绕原点旋转,其实点为(x,y),旋转角度为黄色标注的角度. 推导过程如下: x' = r cos(al+be); y' = r sin(al+be);x '= rcosalcosbe-rsinal ...

  6. Daily Scrum 12.11

    今日完成任务: 解决了类型同时存在于两个自动生成的DLL中导致编译不通过的问题:修复了主页标签显示的BUG:修复异常,网站可以在服务器端正常运行. 明日任务: 黎柱金 解决上传文档时建立文档和标签联系 ...

  7. STF（SmartPhone Test Farm）Mac版本环境搭建

    它的github页面为: https://github.com/openstf/stf 1.Linux一些基本包的安装: 在控制台分别运行 sudo apt-get update sudo apt-g ...

  8. JS调用BHO

    // BHO 中添加下面的函数,设置UIHandler// BHO 包含如下成员变量: // CDocDispatch m_docDispatch;// CComPtr<IDocHostUIHa ...

  9. Qt 5.7 版本+2013VS环境配置

    原本是使用MSVC5.5.1的版本,碍于习惯,之前一直使用creator,后面才转向VS,因为它的调试实在是太棒了,小程序还是creator调试(比如抽出大程序中的小模块之类的) 不知道是版本问题还是 ...

  10. php 获取代码执行时间和消耗的内存

    做一些php性能测试的时候,要获取代码执行时间和消耗的内存,查了一下资料,发现php有自带的函数可以实现这个功能,具体实现代码如下: $t1 = microtime(true);// ... 执行代码 ...