发表于： 2019-10-07 23:38:38

今日完成的事

今天写完了后台页面的手风琴，手风琴看似简单，但是写起来还是挺费劲的，首先隐藏的部分和没隐藏的部分分开写,开始的时候列表的小图标难到我了，因为没有图。后来我想起师兄告诉我一个图标字体库Font Awesome，进去查了查发现有很多可以用的图标，

Font Awesome提供很多可供缩放的矢量图标，他有很多优点绝对的css控制，不需要js，完美兼容其他框架，高分屏无限缩放等。而且使用也非常简单，只需要把它的cdn网址复制过来就行

‍‍<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">‍‍

使用的时候只要加上f‍‍a的前缀，再加上图标的名字就可以用在任何地方了。Font Awesome还可以用来增大或者变小，还可以设置固定宽度，还可以与边框对齐，还可以用来创建动态动画效果和任意翻转的效果，几个图标还可以组合起来使用，还可以修改标签的color属性和fant-size属性来修改图标颜色和大小。之后我遇到的困难是怎样展示交互的效果，首先是点击任意一个列表这个列表背景颜色改变，其他列表背景颜色恢复到原来的颜色，这里原本我是用的抓取dom标签，然后用dom的style标签来改变颜色，但是我发现这样写hover效果就消失了，最后我修改了一下用classname属性修改样式类才可以。因为我隐藏的标签和没隐藏的标签都是用li写的，所以抽屉效果写的很麻烦用了switch语句，这里写的很麻烦需要在优化一下。然后是一个交互效果，就是点击任意一处，列表的背景颜色都恢复成原来的颜色，这里我开始的想法是在除了列表的区域，其他所有的区域都设立一个点击事件，让其点击时其他列表恢复背景颜色，但是这样写太麻烦了。后来又换了一种思路，给window绑定一个点击事件，让其实现效果，但是这样写的话当点击列表的时候背景颜色也不会改变了，之后想到点击列表时给window解绑，然后效果实现后再绑定window.onclock但是这样的话window就会自动执行了。最后师兄告诉了我一个方法，阻止冒泡事件。所谓的冒泡事件通俗的讲就是，假如我给一个div绑定了一个onclicn事件，那么当我触发这个事件的时候这个div的父亲也会触发一遍onclick事件，这个div的爷爷也会触发一遍onclicn事件，一层层往上，一直到window都会触发这个onclicn。但是有时候我们只想让这个div触发onclicn事件，并不想让他的父元素及以上元素也触发onclicn事件，这里就需要用到阻止冒泡这个方法了。阻止冒泡事件用的是‍‍event.stopPropagation()方法，这样当我点击列表时冒泡被阻止window就不会触发onclicn事件了。‍