Блог

Главная - Вопросы по программированию - Панель навигации начальной загрузки не отвечает

Панель навигации начальной загрузки не отвечает

#bootstrap-4 #django-templates #navbar

#bootstrap-4 #django-шаблоны #панель навигации

Вопрос:

Я пытаюсь включить Bootstrap в проект Django. Однако я не могу заставить кнопку панели навигации когда-либо расширяться после ее нажатия. Я подозреваю, что что-то происходит с распределением Django по шаблонам, что приводит к странной загрузке Jquery, и поэтому никогда ничего не делайте при нажатии кнопки.

Ниже мой content_base.html .

 {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <link rel="stylesheet" href={% static 'css/customizations.css' %}>
</head>
<body>
<!-- NavBar -->
<header>
    <nav class="navbar navbar-dark bg-dark">
        <a class="navbar-brand" href={% url 'home_page:home_page' %}>Home Page</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <!-- Needs the users form path for login when created, filler for now to home -->
                    <a class="nav-link" href={% url 'home_page:home_page' %}>Testing</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href={% url 'home_page:about_page' %}>Another Test</a>
                </li>
            </ul>
        </div>
    </nav>
</header>
{% block content %}
{% endblock content %}

<!-- BOOTSTRAP CDN URLs -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
        crossorigin="anonymous"></script>

<!-- MATHJAX CDN URLs -->
<!--For notes on MathJax CDNs and recommended practices for using the CDNs
https://docs.mathjax.org/en/v2.7-latest/start.html-->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</body>
</html>

И тогда файл содержимого расширит вышеуказанное и будет выглядеть так example_content.html:

 {% extends 'content_base.html' %}

{% block content %}
    <head>
        <title>A page title</title>
    </head>
    <body>
    <div>
        <h1>Some Heading</h1>
---
---
    </div>
    </body>
{% endblock %}

Я удалил материал mathjax, но это ничего не изменило. Я также попытался просто удалить различные источники JS и загрузить их локально, но все равно ничего. Любая помощь приветствуется, кажется, что это должно было быть просто, но я часами боролся с этим.

Ответ №1:

Сегодня утром я заработал. Эти двое были виновниками:

 data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"

Я изменил их на:

 data-target="#navbarText"
aria-controls="navbarText"

После этого все работало нормально.