<!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. Selenium2+python自动化8-SeleniumBuilder辅助定位元素

    前言 福利来了,对于用火狐浏览器的小伙伴们,你还在为定位元素而烦恼嘛? 上古神器Selenium Builder来啦,哪里不会点哪里,妈妈再也不用担心我的定位元素问题啦!(但是也不是万能,基本上都能覆 ...

  2. C# 代码页获取input的值

    <input id="aa" name="iaa" type="text" /> Label1.Text = Request.F ...

  3. 初步认识JUnit

    初步认识JUnit 目前大多数的基于Java的企业应用软件,肯定少不了单元测试,程序员通过编写单元测试来验证自己程序的有效性:管理者通过持续自动的执行单元测试和分析单元测试覆盖率来确保软件本身的质量. ...

  4. 让阿里云支持ipv6（其他多数VPS通用）

    https://www.tunnelbroker.net/tunnel_detail.php?tid=322922

  5. 揭开HTTP网络协议神秘面纱系列(一）

    1.了解Web及网络基础 TCP/IP协议族按层次可以分为下面四层: 应用层:决定了向用户提供应用服务时通信的活动,TCP/IP协议族内预存了各类通用的应用服务,比如:FTP(文件传输协议)和DNS( ...

  6. 2016/9/21 leetcode 解题笔记 395.Longest Substring with At Least K Repeating Characters

    Find the length of the longest substring T of a given string (consists of lowercase letters only) su ...

  7. (2015秋) 作业6：（电梯系统之结对编程 I 总分=2*50 分）

    电梯系统 0. 背景 南通大学钟秀校区“主教学楼” 用 2 部电梯(连地下室共9层):每到下课.上课前都特别拥挤,大家希望改进已有的电梯调度算法,满足学生和老师快速乘坐电梯的需要.因此,需要重新设计一 ...

  8. SSE：服务器发送事件,使用长链接进行通讯

    概述 传统的网页都是浏览器向服务器“查询”数据,但是很多场合,最有效的方式是服务器向浏览器“发送”数据.比如,每当收到新的电子邮件,服务器就向浏览器发送一个“通知”,这要比浏览器按时向服务器查询(po ...

  9. 解决Failed to load class "org.slf4j.impl.StaticLoggerBinder"

    Hibernate使用SLF4J API记录日志,所以在Hibernate的lib中,不再提供Log4J的包,而大部分框架依然使用Log4J记录日志,这样导致了兼容性问题. 解决办法,两步: 一.在编 ...

  10. Android性能优化方法（八）

    Android SDK tools目录下提供一个观察布局的工具,层级观察器(Hierarchy Viewer).Hierarchy Viewer工具是一个非常好的布局优化工具,同时,你也可以通过它学习 ...