Bootstrap实现下拉菜单多级联动

Bootstrap 实现下拉菜单多级联动 Bootstrap 是一个非常流行的前端框架，它提供了许多实用的组件和工具，使得开发者可以快速构建漂亮的网页。今天，我们将讨论如何使用 Bootstrap 实现下拉菜单多级联动。 在 Bootstrap 中，下拉菜单是通过 `.dropdown` 类来实现的。要创建一个下拉菜单，只需要在 HTML 结构中添加该类，并将菜单项包装在 `<ul>` 元素中。例如： ```html <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-white" data-target="#" href="javascript:;"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div> ``` 但是，以上代码只能创建一个简单的下拉菜单，而不能实现多级联动。要实现多级联动，我们需要添加一些 CSS 样式和 JavaScript 代码。 我们需要添加一个 `.dropdown-submenu` 类来定义子菜单的样式： ```css .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } ``` 然后，我们需要添加一些 JavaScript 代码来实现菜单的展开和折叠： ```javascript $(document).ready(function() { $('body').on('click', '.dropdown-submenu a.test', function(e) { $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); ``` 我们可以使用以下 HTML 代码来创建一个多级联动的下拉菜单： ```html <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-white" data-target="#" href="javascript:;"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Second level</a></li> <li><a tabindex="-1" href="#">Second level</a></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Third level</a></li> <li><a tabindex="-1" href="#">Third level</a></li> </ul> </li> </ul> </li> </ul> </div> ``` 通过以上代码，我们可以实现一个多级联动的下拉菜单，每个菜单项都可以展开和折叠。