Неперехваченная ошибка типа при создании выпадающей кнопки в Bootstrap 5

ProgramBox

Неперехваченная ошибка типа при создании выпадающей кнопки в Bootstrap 5

Post author:admin
Запись опубликована:22 ноября, 2022
Post category:Вопросы по программированию

#html #css #twitter-bootstrap #bootstrap-5

#HTML #css — код #twitter-bootstrap #начальная загрузка-5

Вопрос:

Я пытаюсь создать выпадающую кнопку с помощью Bootstrap 5, но я получаю сообщение об ошибке:

Неперехваченная ошибка типа: t.createPopper не является функцией

Это мой HTML-код:

 <div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
    </a>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

Это сценарии, которые я использую:

 <script src="assets/scripts/vendors/jquery-3.5.1.min.js"></script>
<script src="assets/scripts/vendors/popper.min.js"></script>
<script src="assets/scripts/vendors/bootstrap.min.js"></script>

Ответ №1:

Вы можете использовать bootstrap.bundle.min.js или bootstrap.bundle.js как автономную библиотеку, содержащую Popper. Бывший:-

 <script src="src/jquery-ui.min.js"></script>
<script src="src/bootstrap.bundle.min.js"></script>

Это решило мою проблему. Надеюсь, это кому-то поможет.

Ответ №2:

Ваш код работает, но , возможно , библиотека Bootstrap или Popper не завершена.. используйте CDN вместо автономной библиотеки

Официальная документация Bootstrap :: https://getbootstrap.com/docs/5.0/getting-started/introduction /

JS Возится с CDN :: https://jsfiddle.net/9jbswr6d/1 /

 <html>
<head>
<!--official Bootstrap CDN-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0- 
beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" 
crossorigin="anonymous">
</head>
<body>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" 
id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
</a>
  
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0- 
beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384- 
ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" 
crossorigin="anonymous"></script> 
</body>
</html>

1. автономная версия предотвращает взлом через посредника. это правильный подход.

2. @RickyLevi Во-первых: я не думаю, что вас могут взломать при использовании CDN. Во-вторых: лично я предпочитаю CDN, так как они быстрее, чем автономная библиотека. Автономным библиотекам нужен быстрый хостинг, чтобы ваш сайт работал быстро, иначе он будет работать медленно.

3. мир изменился, читайте в owasp.org . почти каждая высокотехнологичная компания настоятельно рекомендует никогда не использовать ссылку cdn (только для тестирования / 1-минутных примеров кодирования, но никогда для производства), это небезопасно. ссылка: cheatsheetseries.owasp.org/cheatsheets /. … возможно, bootstrap — это то, чему вы могли бы доверять. но даже с integrity учетом того, что их код может измениться для сбора информации или чего-то такого, что вам не нужно. я просто записываю это — чтобы другие люди знали и учитывали. не специально для вашего ответа — вот почему я не понизил его рейтинг.

Ответ №3:

Проблема связана с версией popper. Я не знаю, что они сделали, но с последней версией popper выпадающий список больше не работает.

Я использовал версию 1.14.3, чтобы заставить ее работать в этой скрипке: https://jsfiddle.net/e5n1astx /

 <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Код, который я использовал выше.
Ссылка на версию popper, которую я использовал: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js

Ответ №4:

Необходимо импортировать popper js в ваш код. Перейдите по ссылке: https://popper.js.org / После этого он будет работать нормально

 <script src="https://unpkg.com/@popperjs/core@2"></script>

1. Рассмотрите возможность редактирования вашего ответа, чтобы описать, как этот ответ решает проблему, описанную в вопросе.

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

Ответ №5:

это спасло меня:

 <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<div class="dropdown">
   <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropdown button
   </button>
   <div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
   </div>
</div>
<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@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2 xf0Uwh9KtT" crossorigin="anonymous"></script>   
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384- YQ4JLhjyBLPDQt//I STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Развернуть фрагмент