html - Bootstrap 4导航栏切换不起作用
问题描述
这是我在 Bootstrap 文档中用于响应式导航栏的代码。但是,当我将浏览器窗口(在 Chrome/Safari 中)设置为移动设备大小时,切换下拉菜单似乎不起作用。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Title</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
解决方案
不建议在 Angular Project 中添加 jquery,因为 Angular 操作 DOM 以呈现页面的方式与 jquery 的方式不同。
因此,这是解决此问题的最佳方法:
第 1 步:添加引导程序 4 后,在您的 Angular 项目中安装 ngx-bootstrap
npm install ngx-bootstrap --save
第 2 步:在 app.module.ts 中: import { CollapseModule } from 'ngx-bootstrap/collapse';
以 root 身份注入 CollapseModule,使其在所有组件和模块中都可用。
进口: [ ..., CollapseModule.forRoot() ]
第 3 步:在 div 上添加折叠指令以在单击时切换[额外:您可以通过 isAnimated 输入选项启用动画]
<button (click)="isNavbarCollapsed = !isNavbarCollapsed" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" [attr.aria-expanded]="!isNavbarCollapsed" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div [collapse]="isNavbarCollapsed" class="collapse navbar-collapse" id="navbarResponsive" [isAnimated]="true">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
第 4 步:在 components.ts 中初始化“isNavbarCollapsed”
isNavbarCollapsed = true;
推荐阅读
- php - 将数据表单发送到数据库不起作用
- java - 模块化项目使用 jOpenDocument 上升 InvalidModuleDescriptorException
- java - 如何将图像 url 保存在 firebase 实时数据库中?
- dart - 飞镖:微型
- android - 使用导航组件时在片段之间传递数据有什么限制?
- javascript - 我想从mysql的connection.query中取出结果并将其保存在nodejs的全局范围链中
- node.js - MongoDB 查找和展开没有给出正确的结果
- cassandra - Cassandra 在执行查询时读取超时以进行批量删除
- git - new_git_repository 中 build_file 内容的更改导致再次克隆
- ios - 从 Firestore 检索数据时如何获取错误“致命错误:索引超出范围”?