Выпадающее меню navbar на моем сайте Django / Bootstrap 4 работает везде, кроме главной страницы. - PullRequest
0 голосов
/ 13 апреля 2020

Как видно из названия, на моем сайте есть выпадающее меню. Сначала он только работал на домашней странице, и больше нигде, пока я не понял, что не включил ссылку на фреймворк Bootstrap JavaScript в базовый файл. html. Поэтому я включил его, и теперь выпадающее меню работает везде, кроме главной страницы. Я чувствую, что это простое решение и просто смотрит мне в лицо, но это меня озадачило. Любая помощь приветствуется.

Вот база. html

{% load static %}
<!DOCTYPE html>
<html>

<head>
    <title>TUD Cinemas</title>
    <!-- My own CSS Link -->
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">

    <!-- Bootstrap CSS Link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Google font link -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">


</head>

<body>


    <nav class="navbar navbar-expand-lg navbar-light sticky-top">
        <div class="container">
            <a class="navbar-brand" href="{% url 'home' %}">
                <img src="/static/images/TUDC_logo.png" class="luke_logo">
            </a>


            <ul class="navbar-nav">
                <li class="nav-item">
                    <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 'movies' %}">What's on</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="{% url 'blog' %}">Blog</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="{% url 'news' %}">News</a>
                </li>

                {% if request.user.is_authenticated %}
                <!-- Dropdown Menu -->


                <li class="nav-item dropdown multi-level-dropdown">
                    <a href="#" id="menu" data-toggle="dropdown" class="nav-link dropdown-toggle w-100">Account</a>
                    <ul class="dropdown-menu mt-0 rounded-0 bg-light primary-color border-0 z-depth-1">

                        <li class="dropdown-item dropdown-submenu p-1">
                            <a class="w-100">
                                {{ request.user.username }}
                            </a>
                        </li>

                        <div class="dropdown-divider"></div>

                        <li class="dropdown-item dropdown-submenu p-1">
                            {% with total_items=cart|length %}
                            {% if cart|length > 0 %}

                        <li class="nav-item">
                            <a href="{% url 'cart:cart_detail' %}" class="w-100">
                                Your Cart:
                                {{ total_items }} item{{ total_items|pluralize }}:
                                €{{ cart.get_total_price }}
                            </a>
                        </li>
                        {% else %}
                        <li class="dropdown-item dropdown-submenu p-1">
                            <a class="w-100">Cart: (0)</a>
                        </li>
                        {% endif %}
                        {% endwith %}
                </li>
                </li>

                <li class="dropdown-item dropdown-submenu p-1">
                    <a href="{% url 'orders:order_history' %}" class="w-100">Your Tickets</a>
                </li>

                <li class="dropdown-item dropdown-submenu p-1">
                    <a href="{% url 'signout' %}" class="w-100">Sign Out</a>
                </li>

            </ul>



            {% else %}
            <li class="nav-item">
                <a class="nav-link" href="{% url 'signup' %}">Sign Up</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="{% url 'signin' %}">Log In</a>
            </li>
            {% endif %}

            </ul>




            <ul class=" nav navbar-nav ml-auto">

                <form class="form-inline my-2 my-lg-0" action="{% url 'search_result' %}" method="get">
                    {% csrf_token %}
                    <input class="form-control mr-sm-2" type="search" placeholders="Search" aria-label="Search"
                        name="q">
                    <button class="btn btn-outline-primary" type="submit">Search</button>
                </form>




            </ul>

        </div>
    </nav>

    <div class="container basecontainer bg-light">
        {% block content %}
        {% endblock content %}
    </div>


    <!-- Bootstrap JavaScript -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>

А вот и домашняя страница. с благодарностью Спасибо!

1 Ответ

0 голосов
/ 14 апреля 2020

Navbar and dropdown зависит от jQuery и popper.js, поэтому вы должны включить оба js scripts с bootstrap.js в указанном порядке.

Структура и заказ

<head>
    ...All Tags
    Bootstrap CSS Link Tag
</head>
<body>
    ...All Tags
    jQuery Script Tag
    Popper JS Script Tag
    Bootstrap JS Script Tag
</body>

Пример

<head>
    ...
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
    ...
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...