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

【问题标题】：How to make the button works when my navbar is collapsed?当我的导航栏折叠时如何使按钮起作用？
【发布时间】：2019-04-18 06:42:12
【问题描述】：

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

【问题讨论】：

1.请发布客户端代码（不是服务器模板） 2. 添加您的 CSS
我没有任何 CSS，我正在使用 Bootstrap。我只有这个代码...
是的，jQuery 不见了。

标签： javascript jquery django navbar django-staticfiles

【解决方案1】：

如果您使用 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>

【讨论】：

有点奇怪，我从 Bootstrap 网站添加了这个脚本，但是在“元”和另一个脚本之间，它不起作用......我不知道为什么。谢谢！