html - 如何解决下拉菜单错误且不显示?
问题描述
这里我用的是引导模板,但是下拉菜单打不开……我还是个初学者,不明白怎么解决,我的问题有什么解决办法?
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#!">MITRA JAYA FURNITURE</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0 ms-lg-4">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#!">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#!">Tentang Kami</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">Kategori</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#!">All Products</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#!">Popular Items</a></li>
<li><a class="dropdown-item" href="#!">New Arrivals</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#!">Tentang Kami</a></li>
</ul>
<form class="d-flex">
<button class="btn btn-outline-dark" type="submit">
<i class="bi-cart-fill me-1"></i>
Cart
<span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
</button>
</form>
<ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
<li class="nav-item"><a class="nav-link" href="login.php">Login</a></li>
</ul>
</div>
</div>
</nav>
为什么不显示下拉框?您可以在这里查看更多带有预览的代码https://jsfiddle.net/laelza/yq68dok5/1/
请告诉我我错在哪里。太感谢了。:)
解决方案
好像您忘记添加引导程序的 JS 代码:
https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js
推荐阅读
- c# - 如果外部匹配,正则表达式选择内部
- android - 我的 XML 文件更改自动包含另一个标签
- spring - Kafka 监听器接收列表
>,可以食用吗? - python - 如何使用 ElementTree 在 xml 文件中搜索标签,其中我有一个具有特定值的特定“父”标签?(Python)
- angular - 在 Angular 项目中找不到带有 https 连接的页面
- r - 使用 ggplot() 中的函数 sprintf() 将条形图中的单个条形标记为 3 个有效数字
- google-cloud-platform - 无法连接到 GCP 中的 SQL 云实例
- angular - 将数据提取到 Angular 表单数组
- wxpython - 混合使用 PyPubSub 和 wxPython 的内置 pubsub 模块
- angular - 在不克隆的情况下覆盖 Angular HttpClient