Почему мои сворачиваемые ссылки не кликабельны в Bootstrap 5?
При загрузке Bootstrap 4.5.3 через комплект CDN:
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin = "anonymous"></script>
следующий раскрывающийся список отлично работает:
<!-- Nav Item - Pages Collapse Menu -->
<li class = "nav-item">
<a class = "nav-link collapsed" href = "#" data-toggle = "collapse" data-target = "#collapseTwo"
aria-expanded = "true" aria-controls = "collapseTwo">
<span>AAAA</span>
</a>
<div id = "collapseTwo" class = "collapse" aria-labelledby = "headingTwo" data-parent = "#accordionSidebar">
<div class = "bg-white py-2 collapse-inner rounded">
<h6 class = "collapse-header">BBBB</h6>
<a class = "collapse-item" href = "CCCC.html">CCCC</a>
<a class = "collapse-item" href = "DDDD.html">DDDD</a>
</div>
</div>
</li>
Однако, когда я пытаюсь обновить версию Bootstrap до версии 5.0.0 через пакет CDN:
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin = "anonymous"></script>
Затем выпадающее меню больше не кликабельно. Почему это пожалуйста?
К вашему сведению, я использую чистую установку темы https://startbootstrap.com/theme/sb-admin-2 (исходный код доступен на GitHub: https://github.com/startbootstrap/startbootstrap- sb-admin-2), файл index.html. Первоначально упоминалось:
<!-- Bootstrap core JavaScript-->
<script src = "vendor/jquery/jquery.min.js"></script>
<script src = "vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
Но я отметил версию /bootstrap.bundle.min.js (4.5.3) и она все равно работала без проблем через связку CDN Bootstrap 4.5.3, как описано выше.
То есть все отлично работало, если использовать:
<!-- Bootstrap core JavaScript-->
<script src = "vendor/jquery/jquery.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin = "anonymous"></script>
Я не вносил никаких других изменений ни в один из чисто установленных файлов (см. Репозиторий GitHub выше), кроме этой последней строки, и все продолжало работать.
Затем, впоследствии, единственное изменение, которое я сделал, каким-то образом уничтожив раскрывающийся список, заключается в том, что я изменил эту последнюю строку на следующую (для обновления до Bootstrap 5.0.0):
<!-- Bootstrap core JavaScript-->
<script src = "vendor/jquery/jquery.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin = "anonymous"></script>
Почему это уничтожает выпадающие ссылки? Какой инструмент я могу использовать для устранения этой неполадки? Я не вижу никаких ошибок в моей консоли разработчика Firefox.
Фрагмент (Bootstrap 4.5.3)
Полный фрагмент рабочего кода (с 4.5.3) будет следующим:
<!DOCTYPE html>
<head>
<!-- Standard Bootstrap CSS (4.3.1) via CDN -->
<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">
</head>
<body>
<ul class = "navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id = "accordionSidebar">
<!-- Nav Item - Pages Collapse Menu -->
<li class = "nav-item">
<a class = "nav-link collapsed" href = "#" data-toggle = "collapse" data-target = "#collapseTwo"
aria-expanded = "true" aria-controls = "collapseTwo">
<span>Components</span>
</a>
<div id = "collapseTwo" class = "collapse" aria-labelledby = "headingTwo" data-parent = "#accordionSidebar">
<div class = "bg-white py-2 collapse-inner rounded">
<h6 class = "collapse-header">Custom Components:</h6>
<a class = "collapse-item" href = "buttons.html">Buttons</a>
<a class = "collapse-item" href = "cards.html">Cards</a>
</div>
</div>
</li>
</ul>
<!-- End of Sidebar -->
<!-- JQuery (3.5.1) and Bootstrap (4.5.3) JS bundle via CDN -->
<script src = "https://code.jquery.com/jquery-3.5.1.js" integrity = "sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc = " crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin = "anonymous"></script>
</body>
</html>Если вы измените последнюю строку скрипта на обновление до Bootstrap 5.0.0, то свертывание больше не работает:
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin = "anonymous"></script>
Буду очень признателен за любую помощь, которая поможет мне лучше понять, как портировать этот код на Bootsrap 5. Мне вообще нужен JQuery для этого?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Bootstrap 5 не требует jQuery, но вы все равно можете его использовать.
Если вы сравните свой код с документацией для Collapse, вы увидите, что здесь было изменено имя атрибута с data-toggle на data-bs-toggle для Bootstrap 5. Кроме того, якоря используют атрибут href для установки цели, а не атрибут данных. Если вы исправите эти вещи, это сработает.
<!DOCTYPE html>
<head>
<!-- Standard Bootstrap CSS (5.0.0) via CDN-->
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin = "anonymous">
</head>
<body>
<ul class = "navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"
id = "accordionSidebar">
<!-- Nav Item - Pages Collapse Menu -->
<li class = "nav-item">
<a class = "nav-link collapsed" href = "#collapseTwo"
data-bs-toggle = "collapse" aria-expanded = "true" aria-controls = "collapseTwo">
<span>Components</span>
</a>
<div id = "collapseTwo" class = "collapse" aria-labelledby = "headingTwo"
data-parent = "#accordionSidebar">
<div class = "bg-white py-2 collapse-inner rounded">
<h6 class = "collapse-header">Custom Components:</h6>
<a class = "collapse-item" href = "buttons.html">Buttons</a>
<a class = "collapse-item" href = "cards.html">Cards</a>
</div>
</div>
</li>
</ul>
<!-- End of Sidebar -->
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin = "anonymous"></script>
</body>
</html>