当我的导航栏折叠时如何使按钮起作用？

Question

对于个人 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>

Answer 1

如果您使用 Bootstrap，则需要为其添加 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>

当我的导航栏折叠时如何使按钮起作用？

How to make the button works when my navbar is collapsed?

javascript

jquery

django

navbar

django-staticfiles