javascript - 当我的导航栏折叠时如何使按钮起作用?
问题描述
对于个人 Django 项目,我正在设置一个响应式导航栏。当我的导航栏折叠时,按钮不起作用。如何使它起作用?我知道我们需要 js 或 jquery(我从来不知道),但我以前从未做过 js 或 jquery。
我已经尝试将一些代码放在我的 Django 项目等的静态文件中......但没有任何效果。我也上网查了一下,但我没有找到我理解的东西。
我的导航栏:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Tournament Manager</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavBar" aria-controls="topNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="topNavBar" style>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="{% url 'contact' %}">Contact</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
{% if user.is_authenticated %}
<P>Hi {{ user.username }}!</p>
<p><a href="{% url 'logout' %}" class="btn btn-dark">logout</a></p>
{% else %}
<a href="{% url 'login' %}" class="btn btn-outline-primary btn-sm">login</a> |
<a href="{% url 'signup' %}" class="btn btn-outline-success btn-sm">signup</a>
{% endif %}
</form>
</div>
</nav>
还有我的 base.html :
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta charset="utf-8">
<title>Tournament Manager - {% block title %}Django Auth Tutorial{% endblock %}</title>
</head>
<body>
<main>
{% include 'navbar.html' %}
<div class="container">
{% block content %}
{% endblock %}
</div>
</main>
</body>
</html>
解决方案
如果您使用 Boostrap,则需要为其添加 JQuery。编辑你的 base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta charset="utf-8">
<title>Tournament Manager - {% block title %}Django Auth Tutorial{% endblock %}</title>
</head>
<body>
<main>
{% include 'navbar.html' %}
<div class="container">
{% block content %}
{% endblock %}
</div>
</main>
</body>
</html>
推荐阅读
- node.js - 使用 Formidable 上传 Node.js 文件 - 事件不会被触发
- javascript - Echarts条形图 - 是否有横向滚动的可能性?
- node.js - Google Home Assistant 上 mp3 直播的延迟
- reactjs - 如何使用 context.state 设置组件状态?
- mysql - 基于单个不同列选择唯一行 - MySQL
- jenkins - 是否可以在 slackSend() 功能 Jenkins 声明性管道中发送 (thread_ts) 之类的属性...?
- android - java.lang.RuntimeException:无法实例化活动...错误的方法句柄类型 7
- php - GD 图像调整大小在生产服务器上不起作用(Amazon EC2 Ubuntu)
- camunda - 从驾驶舱重新启动 camunda 进程
- python - 如何创建一个只接受位置参数而没有关键字参数的python函数?