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");
}
*/

注释掉上面几行，然后清除浏览器缓存，运行，就可以了。

From：一号门