当我降落在这里时，我也在寻找同样的东西。上面的答案很有帮助，但并没有把我带到我需要去的地方。我了解到Bootstrap 3 dropdown sub menu missing 和那里提供的解决方法，但又需要更多的东西。
然后我找到了http://www.smartmenus.org/，它在我们的生产应用程序的 Aurelia 下拉菜单中提供了我需要的响应能力和功能。我与他们的团队合作，获得了一个运行良好的骨架应用程序版本。
你可以在http://www.smartmenus.org/files/demos/aurelia/SmartMenusDemo.zip下载。
app.ts 文件与上面的示例类似，但添加了对字体真棒图标的支持：
import {RouterConfiguration, Router} from 'aurelia-router';
import 'jquery';
import 'bootstrap';
import 'smartmenus';
import 'smartmenus-bootstrap';
export class App {
router: Router;
configureRouter(config: RouterConfiguration, router: Router) {
config.title = 'Aurelia';
config.map([
{ route: ['', 'welcome'], name: 'welcome', moduleId: './welcome', nav: true, title: 'Welcome' },
{
route: 'users', name: 'users', moduleId: './users', nav: true, title: 'Show Users',
settings: {
subMenu: [{ href: '#/users', title: 'Users', iconClass: 'fa fa-slideshare' },
{ href: '#/usersTest', title: 'Test Users', iconClass: 'fa fa-street-view' },
{
href: '#', title: 'Sub Sub', iconClass: 'fa fa-medium', settings: {
subMenu: [{ href: '#/child-router', title: 'Child Router', iconClass: 'fa fa-registered' },
{ href: '#/usersTest', title: 'Test Users', iconClass: 'fa fa-street-view' }]
}
},
{ href: '#/child-router', title: 'Child Router', iconClass: 'fa fa-registered' }]
}
},
{ route: 'usersTest', name: 'usersTest', moduleId: './usersTest', nav: false, title: 'Test Users' },
{ route: 'child-router', name: 'childRouter', moduleId: 'child-router', nav: false, title: 'Child Router' },
{ route: 'users', name: 'users', moduleId: './users', nav: true, title: 'Github Users' }
]);
this.router = router;
}
attached(): void {
$.SmartMenus.Bootstrap.init();
}
}
我在 nav-bar.html 中实现了对 4 级子菜单的支持：
<template bindable="router">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-level-nav">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="fa fa-home"></i>
<span>${router.title}</span>
</a>
</div>
<div class="collapse navbar-collapse" id="top-level-nav">
<ul id="main-menu" class="nav navbar-nav ">
<li repeat.for="route of router.navigation" class="${row.isActive ? 'active' : ''} ${route.settings.subMenu ? 'dropdown' : ''}">
<!-- if route has no submenu -->
<a href.bind="route.href" if.bind="!route.settings.subMenu">${route.title}</a>
<!-- if route has submenu -->
<a if.bind="route.settings.subMenu" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="true">
${route.title} <span class="caret"></span>
</a>
<ul if.bind="route.settings.subMenu" class="dropdown-menu">
<li repeat.for="l2SubMenu of route.settings.subMenu">
<a href.bind="l2SubMenu.href" if.bind="!l2SubMenu.settings.subMenu"><span class.bind="l2SubMenu.iconClass"> </span>  ${l2SubMenu.title}</a>
<a href.bind="l2SubMenu.href" if.bind="l2SubMenu.settings.subMenu" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="true">
<span class.bind="l2SubMenu.iconClass"> </span>  ${l2SubMenu.title} <span class="caret"></span>
</a>
<ul if.bind="l2SubMenu.settings.subMenu" class="dropdown-menu">
<li repeat.for="l3SubMenu of l2SubMenu.settings.subMenu">
<a href.bind="l3SubMenu.href" if.bind="!l3SubMenu.settings.subMenu"><span class.bind="l3SubMenu.iconClass"> </span>  ${l3SubMenu.title}</a>
<a href.bind="l3SubMenu.href" if.bind="l3SubMenu.settings.subMenu" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="true">
<span class.bind="l3SubMenu.iconClass"> </span>
  ${l3SubMenu.title} <span class="caret"></span>
</a>
<ul if.bind="l3SubMenu.settings.subMenu" class="dropdown-menu">
<li repeat.for="l4SubMenu of l3SubMenu.settings.subMenu">
<a href.bind="l4SubMenu.href"><span class.bind="l4SubMenu.iconClass"> </span>  ${l4SubMenu.title}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="loader" if.bind="router.isNavigating">
<i class="fa fa-spinner fa-spin fa-2x"></i>
</li>
</ul>
</div>
</nav>
</template>
如您所见，SmartMenus 不需要对应用程序进行太多更改，但在 Aurelia 中为我们提供了响应迅速的多级下拉菜单，并且具有 Bootstrap 的强大功能，而不管 Bootstrap 是否支持该功能。
希望这对某人有所帮助！