对象错误，应该是that.style=。。。这一步错误，跟前面 var self = this 一样，需要重新定义this指向。var that = this；

这个类是什么的

附上一张图

1. 如果菜单栏的状态值为 allClosed, 则打开点击的菜单项

2. 将菜单栏的状态设置为 hasOpened

3. 并将点击的菜单项保存到菜单栏的属性中,方便下次操作

不知道我说明白了没

搜索　mocha

想要使用bootstrap的图标，需要引入bootstrap的文件。

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

之后就可以了。望采纳

bootstarp官网说明：https://v3.bootcss.com/getting-started/

联网的情况下，最简单的做法是，head引入(复制粘贴)：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

没网络的情况，如楼上所说，将资源下载到本地引入。

官网都有介绍，了解下

应该是因为div上并没有定义触发事件，并没有事件来触发所以看不到效果。你可以在div上定义事件测试一下。

他的不是在样式列表classlist里面追加吗？ele.classList.add('sidbar_move_left');

先 ！  然后tab键

http://img.mukewang.com/down/53a9523c0001c5f600000000.zip

添加个插件Autoprefix css

你看一下console.log(this.el);的结果。如果是null，说明你在获取this.el这个dom对象时出现错误，看是否是拼写出现问题

http://www.sublimetext.com/3

不仅仅是关闭按钮会相应 click 事件，sidebar的子元素 ul也会响应 ，老师这样写是因为他在后面给ul元素标签终止click事件冒泡。建议你去看一下JS事件冒泡机制~

按顺序来引入css

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">

@charset "UTF-8";
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}
fieldset, img, input, button { 
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none; 
}

ul, ol {
    list-style: none; 
}

input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun", "宋体";
}

select, input {
    vertical-align: middle;
}

select, input, textarea {
    font-size: 12px;
    margin: 0;
}

textarea {
    resize: none;
}


img {
    border: 0;
    vertical-align: middle; 
}


table {
    border-collapse: collapse;
}


body {
    font: 12px/150% Arial, Verdana, "\5b8b\4f53";
    color: #666;
    background: #fff;
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #C81623;
}

h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}

s, i, em {
    font-style: normal; 
    text-decoration: none;
}

.col-red {
    color: #C81623 !important; 
}

/*公共类*/

.fl {
    float: left;
}

.fr {
    float: right;
}

.al {
    text-align: left;
}

.ac {
    text-align: center;
}

.ar {
    text-align: right;
}

.hide {
    display: none;
}

报错 你不能读取未定义的target属性

你没发现event.target不在function（event）函数里吗

试一下把下面这段放入

  function（event）{

if( event.target !==this.el){     //此句报错

            self.triggerSwitch();

        }

}

我也初学 不对勿喷

问题1：

new Sidebar只是一个构造函数，他就像一个生产对象的工具，没人用他，他只会静静的躺在那里。加了括号（）后，他变成了new Sidebar（），这个括号意味着他被调用了，他调用了会产生一个东西，我们称呼这个东西叫实例对象，实例对象拥有构造函数内定义的属性和方法。

但是我们生产出来了一个对象，总要有变量来接受他呀，所有我们var sidebar这个变量来接收new Sidebar（）产生的对象。就像我们要 var str =‘abc’一样

如果你是使用 var sideBar = Sidebar（），这样不会创建实例对象，而是产生了全局变量，因为此时Sidebar里面一大堆this都是指向的window，你执行 var sideBar = Sidebar（）就等于做了

window.state="opened";

window.el=document.....这样的

问题2：

如果你使用var sideBar = new Sidebar（），程序会做三件事情

1.创建了一个空对象sideBar

2.我们将这个空对象的proto成员指向了Sidebar函数对象prototype成员的对象

3.我们将Sidebar函数对象的this指针替换成sidebar，然后再调用Sidebar对象

如果你觉得这三件事情有些绕，你就可以理解成new这个关键字会创造一个对象，让这个对象来接受构造函数的实行和方法，而不是让window来接收。

所以忘记写new是很危险的事情，如何避免？很简单

在构造函数前加一个判断

if(!this instanceof Sidebar){//如果这个创建的对象不是sidebar类型的

    return new Sidebar();//重新去创建

}

源码有浏览器兼容性问题。。ie10，火狐，谷歌，要点击两次item（例如资产）才有相应的nav-content的div出现，而搜狗浏览器只需点击一次

打印一下 this.el 你就知道错在哪边了

顺序错啦

啊。。。

CSS部分

body,div,ul,li,span,i{margin: 0; padding: 0;}
        ul{list-style: none;}

        body {
            font-family: 'Microsoft YaHei','Open Sans', 'trebuchet ms', arial, sans-serif;
            font-size: 12px;
        }

        #sidebar {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
            min-height: 100%;
            width: 35px;
            padding-top: 200px;
            background-color: #e1e1e1;
        }

        .item{
            margin-top: 5px;
            text-align: center;
        }

        #closeBar{
            position: absolute;
            left: 0;
            bottom: 30px;
            width: 35px;
            text-align: center;
            cursor: pointer;
        }

        .nav-content {
            position: absolute;
            z-index: 99;
            min-height: 100%;
            width: 170px;
            opacity: 0;
            filter: alpha(opacity=0);
            text-align: center;
            background-color: #e1e1e1;
        }

        .nav-con-close {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
        }

        .sideBar-move-left{animation: sml 1s 1 forwards;}

        @keyframes sml{
            from{}
            to{
                transform: translateX(-120px);
            }
        }

        .closeBar-move-right{animation: cmr 1s 1 forwards;}

        @keyframes cmr{
            from{}
            to{
                transform: translateX(160px) rotate(405deg) scale(1.5);
            }
        }

        .sideBar-move-right{animation: smr 1s 1 forwards;}

        @keyframes smr{
            from{}
            to{
                transform: translateX(120px);
            }
        }

        .closeBar-move-left{animation: cml 1s 1 forwards;}

        @keyframes cml{
            from{
                transform: scale(1.5);
            }
            to{
                transform: translateX(-160px) rotate(-405deg) scale(1);
            }
        }

        .menuContent-move-right{animation: mmr 1s 1 forwards;}

        @keyframes mmr{
            from{
                opacity: 0;
                filter: alpha(opacity=0);
            }
            to{
                opacity: 1;
                filter: alpha(opacity=100);
                transform: translateX(120px);
            }
        }

        .menuContent-move-left{animation: mml 1s 1 forwards;}

        @keyframes mml{
            from{
                opacity: 1;
                filter: alpha(opacity=100);
            }
            to{
                opacity: 0;
                filter: alpha(opacity=0);
                transform: translateX(-120px);
            }
        }

        .menuContent-move-up{animation: mmu 1s 1 forwards;}

        @keyframes mmu{
            from{
                opacity: 0;
                filter: alpha(opacity=0);
            }
            to{
                opacity: 1;
                filter: alpha(opacity=100);
                transform: translateY(-250px);
            }
        }

我解决了，因为原来from中各个属性没有和to里面相对应。（顺序）

https://developer.mozilla.org/zh-CN/

(function(){

  var SideBar=function(eId,closeId){

   this.state="opened";

   this.el=document.getElementById(eId||'sideBar');

  

   this.closeBar=document.getElementById(closeId||'closeBar');

   var self=this;

   this.el.addEventListener('click',function(event){

    if (event.target !== self.el){

      self.triggerSwitch();     

    } 

   });

  };

  SideBar.prototype.triggerSwitch=function(){

   if (this.state==="opened") {

    this.close();     

    

   }else{

    this.open();

    

   }

  };

  SideBar.prototype.close=function(){

   this.state="closed";

  };

  SideBar.prototype.open=function(){

   this.state=="opened";

  };

  

  var sidebar=new SideBar();

  

 })();

content.log("打开或关闭");

实例化。