Как заставить кнопку работать, когда моя навигационная панель свернута? - PullRequest
Новая
       19

Как заставить кнопку работать, когда моя навигационная панель свернута?

0 голосов
/ 18 апреля 2019

Для личного проекта 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 Ответ

1 голос
/ 18 апреля 2019

Если вы используете 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>
...