Выпадающее подменю Bootstrap 5 не расширяется

Я пытаюсь реализовать раскрывающееся меню в Bootstrap 5. Раскрывающееся меню появляется, но элементы подменю не расширяются при нажатии. Вот мой код:

<body>
    <nav class = "navbar navbar-expand-lg navbar-light bg-light">
        <div class = "container-fluid">
            <a class = "navbar-brand" href = "main.jsp">Green Garden</a>
            <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarNav"
            aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation">
                <span class = "navbar-toggler-icon"></span>
            </button>
            <div class = "collapse navbar-collapse" id = "navbarNav">
                <ul class = "navbar-nav me-auto mb-2 mb-lg-0">
                    <li class = "nav-item">
                        <a class = "nav-link active" aria-current = "page" href = "main.jsp">Home</a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link" href = "main.jsp">List</a>
                    </li>
                </ul>
                <ul class = "navbar-nav ms-auto">
                    <li class = "nav-item dropdown">
                        <a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdown" role = "button"
                        data-bs-toggle = "dropdown" aria-expanded = "false">member</a>
                        <ul class = "dropdown-menu" aria-labelledby = "navbarDropdown">
                            <li><a class = "dropdown-item active" href = "login.jsp">sign in</a></li>
                            <li><a class = "dropdown-item" href = "join.jsp">sign up</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class = "container">
        <div class = "col-lg-4"></div>
        <div class = "col-lg-4">
            <div class = "jumbotron" style = "padding-top: 20px">
                <form method = "post" action = "loginAction.jsp">
                    <h3>Sign in to your Account!</h3>
                    <div class = "form-group">
                        <input type = "text" class = "form-control" placeholder = "username" name = "userID" maxlength = "20">
                    </div>
                    <div class = "form-group">
                        <input type = "password" class = "form-control" placeholder = "password" name = "userPassword" maxlength = "20">
                    </div>
                    <input type = "submit" class = "btn btn-primary form-control" value = "로그인">
                </form>
            </div>
        </div>
    </div>

    <script src = "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
    integrity = "sha384-oBqDVmMz4fnFO9gybBogGzS1nQZVXT1mo/xWOVvBMEFJlHq2BOsvI5g5EnnxI3Ns" crossorigin = "anonymous"></script>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+3oY2amUK7B1o3J6tYf0XK72smfY6" crossorigin = "anonymous"></script>
</body>
</html>

Проблема: раскрывающееся меню с надписью «Участник» отображается правильно, но элементы подменю (войти в систему, зарегистрироваться) не раскрываются при нажатии. Что я пробовал: Убедитесь, что Bootstrap CSS и JavaScript включены правильно. Проверил структуру выпадающего меню. Ожидаемое поведение: когда я нажимаю раскрывающийся список «Участник», я ожидаю, что элементы подменю (войти в систему, зарегистрируйтесь) развернутся и станут доступными для кликов. Может ли кто-нибудь помочь мне определить, что я делаю неправильно?

Спасибо!

javascript html dropdown bootstrap-5

07.06.2024 06:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто добавьте этот скрипт в конец тега body:

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin = "anonymous"></script>

Спасибо за ответ на мой вопрос, но, как видите, я уже это сделал..

— 07.06.2024 07:35

@Cathy Хорошо, попробуй этот скрипт <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bo‌otstrap.bundle.min.j‌s" integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOx‌hy9GkcIdslK1eN7N6jIe‌Hz" crossorigin = "anonymous"></script>

— 07.06.2024 09:08

07.06.2024 06:28