bootstrap与metisMenu菜单不折叠的处理办法
摘要: 简单的系统或者菜单不多的系统，完全没有必要用折叠面板做菜单。一旦用折叠面板反而显得页面很空洞，不饱满，视觉效果非常差。客户看上去也觉得没做什么东西。所以干脆不折叠将所有的菜单直接展示出来会更好
简单的系统或者菜单不多的系统，完全没有必要用折叠面板做菜单。一旦用折叠面板反而显得页面很空洞，不饱满，视觉效果非常差。客户看上去也觉得没做什么东西。所以干脆不折叠将所有的菜单直接展示出来会更好.
在默认情况下用bootstrap 与 metisMenu 是折叠面板的，怎么让它不折叠呢。其实在代码里面做简单的处理就好了，一方面是HTML代码，另一方面是JS代码。
HTML 菜单代码
就是生成菜单的代码，这里硬编码一个例子
<ul class="nav" id="side-menu">
<li>
<a>
<i class="fa fa-edit"></i>
<span class="nav-label">参数配置</span>
</a>
<ul class="nav nav-second-level in">
<li>
<a class="menuItem" th:href="@{/ipset/config}"><span class="nav-label"> 配置 1</span></a>
</li>
<li>
<a class="menuItem" th:href="@{/l2tp/config}"><span class="nav-label">配置 2</span></a>
</li>
<li>
<a class="menuItem" th:href="@{/wan/config}"><span class="nav-label">配置 3</span></a>
</li>
<li>
<a class="menuItem" th:href="@{/pingserver/config}"><span class="nav-label">配置 4</span></a>
</li>
</ul>
</li>
</ul>按这种方式，可以生成多级菜单代码，例子为二级菜单。
JS代码修改
对JS代码的修改，主要在于框架metisMenu的代码修改。修改 jquery.metisMenu.js 代码。注释掉其中几行，比如:
/*
$(this).parent("li").toggleClass("active").children("ul").collapse("toggle");
if ($toggle) {
$(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide");
}
*/注释掉上面几行，然后清除浏览器缓存，运行，就可以了。
