javascript - 引导导航栏下拉菜单/折叠的导航栏未打开
问题描述
我正在尝试向该网站添加一个导航栏,但由于某种原因,它并没有像我想象的那样运行。我要解决的主要问题是让下拉菜单实际显示列表。它在视觉上看起来菜单已经展开,但我不知道这是否与它为什么不起作用有关。目前,折叠的版本只能从汉堡菜单中打开,因为我添加了 CSS。如果没有 CSS,导航栏会展开,但会立即再次折叠。我尝试过的事情:
- 我试图切换包含 Bootstrap.js/css 和 jQuery 的顺序,但这对它没有影响。
- 我也尝试过切换版本,因为我不确定什么与什么兼容,但这并没有成功。
- 起作用的一件事是使用旧版本的引导程序,但如果可能的话,我想使用 4.0 或更高版本。
我很感激有人可以帮助我弄清楚为什么这不起作用。谢谢!
.navbar-collapse.collapse.in {
display: block!important;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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">
Products
</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" href="#">About Us</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>
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</body>
</html>
解决方案
那是因为您bootstrap.js
的版本是 3.3.7,这不是您实现子菜单的方式(在引导程序 3 上)。虽然,如果您已经在使用 bootstrap 4,您应该考虑将您的版本更新到 4.0.0 版(并且您应该使用和bootstrap.js
的相同版本以避免意外错误(就像您刚刚遇到的那样)。bootstrap.js
bootstrap.css
.navbar-collapse.collapse.in {
display: block!important;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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">
Products
</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" href="#">About Us</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>
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</body>
</html>
推荐阅读
- reactjs - 我的功能认证有问题。当我使用邮递员时,我得到一个空令牌,而一切正常
- python - 使用 lec3.urls 中定义的 URLconf,Django 尝试了这些 URL 模式,顺序如下: admin/ hello/ 空路径与这些中的任何一个都不匹配
- python - ManyToMany 字段查询返回空集但不为空
- java - 使用 Java Arrays.fill(array,int[] subArray) 时,为什么 subArray 共享同一个内存块?
- html - HTML center a CCS 灵活布局
- c++ - 文件名字符串中的转义字符
- arduino - 运行 Thingsboard IOT 网关时出现 MQTT 问题
- c# - 如何强制不优化 ASP.NET Core 源代码
- c++ - 为什么在具有更多 I/O 操作的较大文件上重叠 I/O 会变慢?
- css - 如何使用css更改移动设备中堆叠列的顺序