javascript - 有没有办法在 Angular 7 中使用引导程序来实现多级响应式下拉顶部导航栏?
问题描述
我想知道为什么 bootstrap 没有在顶部导航栏中提供多级下拉菜单。
https://www.youtube.com/watch?v=jEAeDID1pks
从这个视频中,我可以看到对我的确切要求,但实施失败了。就像有一段时间我可以获得工作输出,有时却没有。
我不太了解 jQuery,但我认为这只能通过 jQuery 实现,因为我搜索了很多选项。
上图是 bootstrap 提供的基本顶部导航栏。我想要那个下拉菜单中的另一个子菜单,它会导致另一个子菜单。
我需要类似上面的东西。
https://getbootstrap.com/docs/4.0/components/navbar/
从上面的链接中,我参考了引导程序中的导航栏文档。
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
这是基本导航栏的代码。我在我的情况下使用角度 7。我想知道在 Angular 7 中是否有任何其他框架支持此要求。
解决方案
推荐阅读
- azure - Azure SignalR Javascript 协商“无法解析 ...ConnectionStringSetting”
- angular - 如何用mergeMap或switchMap替换订阅?
- python - 如何保存数字而不是绘制它
- laravel - Laravel:注册时发送电子邮件
- c++ - 高效构建二叉搜索树
- linux - 文件打开限制
- python - Tkinter 未在 Heroku 服务器上运行,但在本地主机上运行良好
- elasticsearch - 使用动态字段名称搜索 ElasticSearch
- kotlin - 为什么 runBlocking 不阻塞调用线程
- c# - asp.net c#我需要从存储在另一个字符串中的变量名访问变量的值