前端开发：菜单栏的收缩问题

目录：
1.从问题说起
2.谈谈实现逻辑
3.谈一谈css的优先级
4.so 这个问题
5.参考链接

---

1.从问题说起
我的问题是，菜单栏展开之后，不能通过点击旁边的区域，然后收缩菜单栏

问题表面上看来是缺少有个js，但其实在加上js的时候，还需要一些其他的手段

2.谈谈实现逻辑（jsp页面+css+js）

在header.jsp中

在main.css中

在js中

但是后来我在调试的时候，遇到了一个问题就是（因为这个close-navbar的高度是0，所以我根本就不能选中他，也就不能触发它上面的动作了）

3.谈一谈css的优先级
菜鸟教程上面是这么说的：style=“ ” > id > class >标签选择器
http://www.runoob.com/css/css-id-class.html
但是也有这种说法

上面这些选择器都是指向h1的，但是谁的优先级高谁的低呢？用上面的算法可以得出结论：div.box01 h1.title(1+10+1+10=22)div.box01 .title(1+10+10=21) .box01 h1.title(10+1+10=21) .box01 .title (10+10=20)div.box01 h1(1+10+1=12).box01 h1 (10+1=11)div h1(1+1=2)

http://www.css555.com/content/40.html
4.so 这个问题
最后我的解决方法是【下面】，这样就可以调出点中它然后触发在它上面的动作了

  <div style="height:877px;"  class="close-navbar"></div>

5.相关参考链接
http://www.runoob.com/css/css-id-class.html
http://www.css555.com/content/40.html