前言原创文章，欢迎转载，请保留出处。有任何错误、疑问或者建议，欢迎指出。我的邮箱:Maxwell_nc@163.com
前一篇介绍了页面的跳转，自第三篇开始好像就没更新过源码，这星期对源码改动了比较多，本来打算介绍盒子pannel，不过还是紧接着上一篇继续介绍一下如何利用Bootstrap3的自带特性制作垂直二级菜单。
补充内容
另外要补充一下，用上篇的方法实际是把多个页面一起编译成一个servlet送到服务器，这样做会使得所有的css和js都是公有的，每个网页都能访问，不过要注意引入css和js的位置。
实现效果
未点击：
点击展开：
点击子菜单：
HTML代码
下面对比两种菜单的写法：
主要使用了Bootstrap3的data-toggle=”collapse”特性来实现垂直二级菜单。
===”glyphicon glyphicon-menu-down”> </span>二级菜单=>==>==></li>CSS代码
由于破坏了原来的菜单结构，需要重新为二级菜单添加CSS样式，，稍微修改一下之前的CSS代码即可：
/* 二级菜单 */.nav-sidebar>li>ul>li>a{color: #ffffff;padding-right: 20px;padding-left: 40px;>.active>a,#l2_Menu>.active>a:hover,#l2_Menu>.active>a:focus{color: #C80027;background-color: #ffffff;}JS代码
由于使用了和nav-sidebar不一样的类，所以要写一段JS代码来调整，以防出现下面的问题：
代码如下，注意是写在点击事件中，可以参考上一篇：
/* 对二级菜单点击做调整 */var second = document.getElementById(“l2_Menu”);if($(e.target).attr(‘name’)!= “menu-second-ctrl”){second.setAttribute(“class”,”nav nav-list menu-second collapse”);}var s_arr = document.getElementsByName(“menu-second-ctrl”);for(var i=0;i<s_arr.length;i++){s_arr[i].parentNode.setAttribute(“class”,””);}点击逻辑
点击按钮发生的事件逻辑如下图（下图是处于点击了“crud展示”后点击二级菜单按钮出现的截图）：
后记
源码下载（已经包含本篇的所有源码）： 由于旧版的源码没有二级菜单这部分的源码，而且这份源码相对上一版本区别比较大，建议下载这份新的代码。
我这周更新了比较多的东西，比如新增了登录界面，crud，权限配置等等，记得配置默认欢迎页为login.jsp，登录账号和密码可以参考login.js，这些我都会在后面逐一讲解。
另外新版源码中借鉴了下面的开源代码： https://github.com/marcuswestin/store.js 非常感谢他们。
青春一经典当即永不再赎
