Bootstrap多级下拉菜单插件

bootstrap-submenu是一款在原生bootstrap Dropdowns组件的基础上进行扩展，可以生成多级子菜单的多级下拉菜单插件。

原生的bootstrap下拉菜单只有一层，通过bootstrap-submenu插件，可以生成多级子菜单。

在线预览 下载

 安装

可以通过npm和bower来安装bootstrap-submenu插件。

$ npm install bootstrap-submenu$ bower install bootstrap-submenu                  

 使用方法

在页面中引入bootstrap相关文件和插件所需的相关文件。

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/bootstrap-submenu.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/bootstrap-submenu.min.js"></script>

 HTML结构

制作多级下拉菜单的HTML结构如下：

<div class="dropdown"><button class="btn btn-default" type="button" data-toggle="dropdown">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a tabindex="0">Action</a></li><li class="dropdown-submenu"><a tabindex="0" data-toggle="dropdown">二级菜单</a><ul class="dropdown-menu"><li class="dropdown-header">Dropdown header</li><li><a tabindex="0">二级菜单项</a></li><li class="disabled"><a tabindex="0">二级菜单项</a></li><li><a tabindex="0">二级菜单项</a></li></ul></li><li><a tabindex="0">一级菜单项</a></li><li class="divider"></li><li><a tabindex="0">一级菜单项</a></li></ul>
</div>

 初始化插件

然后在页面加载完毕之后，通过下面的方法来初始化后该bootstrap多级下拉菜单插件。

$('.dropdown-submenu > a').submenupicker();