导航栏切换按钮 - 不会下拉
Posted
技术标签:
【中文标题】导航栏切换按钮 - 不会下拉【英文标题】：Nav Bar Toggle Button - Won't dropdown 【发布时间】：2021-12-13 07:50:45 【问题描述】：我有一个带有 Bootstrap 导航栏的 Django 主页，当调整大小时，我让它显示一个切换按钮。我的问题是，当此切换按钮生效时，我无法下拉导航栏项目？我不确定如何解决这个问题。
这些看起来像什么的截图（作为一个想法）： https://imgur.com/a/PyiUs38 这是我的进口：
粘贴箱：https://pastebin.com/QqPiyVxf
<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- SCRIPTS -->
<script src="https://kit.fontawesome.com/879dc93f9e.js" crossorigin="anonymous"></script><nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" >
</a>
<!--MAIN NAV-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
% with request.resolver_match.url_name as url_name %
<ul class="navbar-nav">
<li class="nav-item % if url_name == 'home' %active% endif %">
<a class="nav-link" href="% url 'home' %">Home</a>
</li>
<li class="nav-item % if url_name == 'about' %active% endif %">
<a class="nav-link" href="% url 'about' %">About</a>
</li>
<li class="nav-item % if url_name == 'projects' %active% endif %">
<a class="nav-link" href="% url 'projects' %">Projects</a>
</li>
<li class="nav-item % if url_name == 'uses' %active% endif %">
<a class="nav-link" href="% url 'uses' %">Uses</a>
</li>
<li class="nav-item % if url_name == 'contact' %active% endif %">
<a class="nav-link" href="% url 'contact' %">Contact</a>
</li>
</ul>
% endwith %
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>这些是我在正文底部的脚本：
<!-- SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>【问题讨论】：
【参考方案1】：html 文件是否链接到 Bootstrap javascript dependency？是required for navbars。
【讨论】：
我已经用我的导入更新了这个问题，我遵循了引导程序入门指南，它建议导入 cdn.jsdelivr.net/npm/bootstrap@5.1.3。我不认为这会导致问题？【参考方案2】：在您的模板文件中包含以下 JS 库，就在结束 body 标记之前，
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
【讨论】：
我已经用我的导入更新了问题，我按照引导程序入门指南进行操作，该指南建议导入 cdn.jsdelivr.net/npm/bootstrap@5.1.3。我不认为这会导致问题？【参考方案3】：使用 Bootstrap 5.1 版本更新了工作片段
引导程序5.1
我在您的代码中做了以下更改
我使用的是 Bootstrap 5.1 版本 我更改了按钮元素中的以下属性data-toggle="collapse"
data-target="#navbarTogglerDemo02"
改为
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
请检查以下工作的sn-p
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" >
</a>
<!--MAIN NAV-->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
% with request.resolver_match.url_name as url_name %
<ul class="navbar-nav">
<li class="nav-item % if url_name == 'home' %active% endif %">
<a class="nav-link" href="% url 'home' %">Home</a>
</li>
<li class="nav-item % if url_name == 'about' %active% endif %">
<a class="nav-link" href="% url 'about' %">About</a>
</li>
<li class="nav-item % if url_name == 'projects' %active% endif %">
<a class="nav-link" href="% url 'projects' %">Projects</a>
</li>
<li class="nav-item % if url_name == 'uses' %active% endif %">
<a class="nav-link" href="% url 'uses' %">Uses</a>
</li>
<li class="nav-item % if url_name == 'contact' %active% endif %">
<a class="nav-link" href="% url 'contact' %">Contact</a>
</li>
</ul>
% endwith %
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>使用 Bootstrap 3.4.1 版本更新了工作片段
注意：用于显示链接列表的可切换上下文菜单。与dropdown JavaScript plugin 互动。这意味着您必须通过 javascript 调用下拉列表
例如：
// Call the dropdowns via JavaScript___
$('.dropdown-toggle').dropdown();
请检查以下工作的sn-p
$('.dropdown-toggle').dropdown();<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--LOGO-->
<a class="navbar-brand" style="pointer-events: none">
<!-- Unclickable -->
<img src="http://www.w3.org/2000/svg" >
</a>
<!--MAIN NAV-->
<button
type="button"
class="dropdown-toggle"
id="dropdownMenu1"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center dropdown-menu" id="navbar" aria-labelledby="dropdownMenu1">
% with request.resolver_match.url_name as url_name %
<ul class="navbar-nav">
<li class="nav-item % if url_name == 'home' %active% endif %">
<a class="nav-link" href="% url 'home' %">Home</a>
</li>
<li class="nav-item % if url_name == 'about' %active% endif %">
<a class="nav-link" href="% url 'about' %">About</a>
</li>
<li class="nav-item % if url_name == 'projects' %active% endif %">
<a class="nav-link" href="% url 'projects' %">Projects</a>
</li>
<li class="nav-item % if url_name == 'uses' %active% endif %">
<a class="nav-link" href="% url 'uses' %">Uses</a>
</li>
<li class="nav-item % if url_name == 'contact' %active% endif %">
<a class="nav-link" href="% url 'contact' %">Contact</a>
</li>
</ul>
% endwith %
</div>
<!--SOCIALS-->
<!-- Twitter -->
<a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
<i class="fab fa-twitter"></i>
</a>
<!-- LinkedIn -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Github -->
<a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
<i class="fab fa-github"></i>
</a>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>参考链接（我的另一个堆栈溢出答案）：https://***.com/a/69763221/3073842
【讨论】：
以上是关于导航栏切换按钮 - 不会下拉的主要内容，如果未能解决你的问题，请参考以下文章
如何为移动屏幕的导航栏项目添加切换按钮，并使用 HTML、CSS 和 Bootstrap v4 将它们切换为下拉菜单