Выпадающий список не работал на бутстрапе 5.3
Я пытаюсь создать панель навигации с помощью бутстрапа.
Я прочитал документы из здесь, но мой раскрывающийся список не работает.
Я прикрепил все в разделе <head> <head/>, но выпадающий список у меня не работал.
Это мой код:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>НИМХ - АС и БД, Филиал - Пловдив</title>
<!-- index.css -->
<link rel = "stylesheet" href = "./css/index.css">
<!-- CSS Leaflet-->
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/leaflet.css"
integrity = "sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI = "
crossorigin = ""/>
<!-- JS Leaflet -->
<script src = "https://unpkg.com/[email protected]/dist/leaflet.js"
integrity = "sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM = "
crossorigin = ""></script>
<!-- CSS Bootstrap-->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
<!-- JS Bootstrap-->
<script src = "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity = "sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity = "sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
</head>
<body>
<nav class = "navbar navbar-expand-lg bg-body-tertiary">
<div class = "container-fluid">
<a class = "navbar-brand" href = "#">Navbar</a>
<button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav me-auto mb-2 mb-lg-0">
<li class = "nav-item">
<a class = "nav-link active" aria-current = "page" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Link</a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "#" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">
Dropdown
</a>
<ul class = "dropdown-menu">
<li><a class = "dropdown-item" href = "#">Action</a></li>
<li><a class = "dropdown-item" href = "#">Another action</a></li>
<li><hr class = "dropdown-divider"></li>
<li><a class = "dropdown-item" href = "#">Something else here</a></li>
</ul>
</li>
<li class = "nav-item">
<a class = "nav-link disabled">Disabled</a>
</li>
</ul>
<form class = "d-flex" role = "search">
<input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search">
<button class = "btn btn-outline-success" type = "submit">Search</button>
</form>
</div>
</div>
</nav>
<div id = "map">
<!-- Load map -->
<script src = "./js/leaflet.js"></script>
</div>
</body>
</html>
Могу ли я получить пример с работающим раскрывающимся списком на начальной загрузке 5.3?
Я думаю, что я подключил все необходимые библиотеки для работы выпадающего меню?
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
137
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Ответ принят как подходящий
Вы также должны добавить JavaScript Bootstrap:
// Add this line before the closing </body> tag
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
то есть
<div id = "map">
<!-- Load map -->
<script src = "./js/leaflet.js"></script>
</div>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
</body>
</html>
Bootstrap предоставляет вам несколько ссылок stackblitz для проверки их шаблонов, например: https://stackblitz.com/run?file=index.html
Используется в вашем коде примерно так:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>НИМХ - АС и БД, Филиал - Пловдив</title>
<!-- index.css -->
<link rel = "stylesheet" href = "./css/index.css">
<!-- CSS Leaflet-->
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/leaflet.css"
integrity = "sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI = "
crossorigin = ""/>
<!-- JS Leaflet -->
<script src = "https://unpkg.com/[email protected]/dist/leaflet.js"
integrity = "sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM = "
crossorigin = ""></script>
<!-- CSS Bootstrap-->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
<!-- JS Bootstrap-->
<script src = "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity = "sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin = "anonymous"></script>
</head>
<body>
<nav class = "navbar navbar-expand-lg bg-body-tertiary">
<div class = "container-fluid">
<a class = "navbar-brand" href = "#">Navbar</a>
<button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav me-auto mb-2 mb-lg-0">
<li class = "nav-item">
<a class = "nav-link active" aria-current = "page" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Link</a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "#" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">
Dropdown
</a>
<ul class = "dropdown-menu">
<li><a class = "dropdown-item" href = "#">Action</a></li>
<li><a class = "dropdown-item" href = "#">Another action</a></li>
<li><hr class = "dropdown-divider"></li>
<li><a class = "dropdown-item" href = "#">Something else here</a></li>
</ul>
</li>
<li class = "nav-item">
<a class = "nav-link disabled">Disabled</a>
</li>
</ul>
<form class = "d-flex" role = "search">
<input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search">
<button class = "btn btn-outline-success" type = "submit">Search</button>
</form>
</div>
</div>
</nav>
<div id = "map">
<script src = "./js/leaflet.js"></script>
</div>
<!--here -->
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
<!-- here -->
</body>
</html>Итак, все, что вам не хватает, это:
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
перед закрывающим тегом body
Вы дважды включили BOOTSTRAP! удалите эту строку из тега head
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity = "sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin = "anonymous"></script>
Рабочий пример без него: https://jsfiddle.net/MarinHTML/8kscdbn9/11/
------ РЕДАКТИРОВАТЬ ----- устаревший старый ответ: ---
вам понадобится JS, чтобы выполнить эту работу, потому что то, что вы сделали, это вложить раскрывающийся список в другой раскрывающийся список. Не уверен, что это возможно с помощью простых средств начальной загрузки. Вы можете, но он должен быть наведен, и я полагаю, вы этого не хотите.
Вот краткий пример того, что, я думаю, вы хотите: https://jsfiddle.net/MarinHTML/t7zmqcd9/
И вот JS для его использования:
let dds = document.querySelectorAll('.dropdown-toggle')
dds.forEach((dd)=>{
dd.addEventListener('click', function (e) {
var el = this.nextElementSibling
el.style.display = el.style.display==='block'?'none':'block'
})
})
Он уже загрузил BS JS в тег head, ему не нужно его добавлять
—
06.01.2023 15:15
Он сделал это неправильно, проверьте мой фрагмент выше. Это полностью работает.
—
06.01.2023 15:19
Он сделал это правильно. Проблема в том, что он сделал это дважды. Теперь я увидел это.
—
06.01.2023 15:28
Другие вопросы по теме
Кнопки в HTML, не выполняющие функцию onclick
Как вызвать запрос на выборку и дождаться ответа внутри onBeforeRequest в веб-расширении
Как реализовать пользовательский редактор кода с помощью HTML/JavaScript?
Heroku, остановка всех процессов с помощью SIGTERM, процесс завершен со статусом 143
Создание контекста PrivateRoute в React, который работает внутри блока Routes
Как переключить страницу при нажатии кнопки с помощью Streamlit?
Можно ли загрузить файл, вложенный в zip-файл, без загрузки всего zip-файла?
Страница не перенаправляется должным образом
Как сделать ссылки доступными для сканирования в адаптивном меню на веб-странице?
Размещение веб-сервера в локальной среде с использованием только Flutter
Похожие вопросы
Когда я долго прокручиваю последний слайд, Swiperjs сбрасывается на предыдущий слайд
Как использовать функцию js для вставки текста в место, где вызывается функция?
Объявления TypeScript .d.ts не обнаружены при использовании checkJs
React Confirm alert lib
Как генерировать случайные имена при задании двух массивов объектов с парами ключ-значение
Есть ли способ обновить и одновременно нажать условно в Mongodb?
Ограничить CSS в файле .SVG только этим SVG
Что я должен использовать вместо document.domain, чтобы получить домен?
Как создать персональную ссылку с ограниченным сроком действия с помощью DRF и React
Принудительный график не обновляется после изменения данных
Зачем ему использовать javascript, когда bootstrap уже делает это за него, просто добавляя скрипт bootstrap javascript:
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>