Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

html - Dropdown Button in Bootstrap 5 not Working

I Try to create Dropdown button using bootstrap 5 but it's show error "Uncaught TypeError: t.createPopper is not a function":

this my code:

<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>

and i use this script in my page:

<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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Your code is work but may the Bootstrap or Popper Library not complete .. use CDN instead of offline library

The official documentation of Bootstrap :: https://getbootstrap.com/docs/5.0/getting-started/introduction/

JS Fiddle with CDN :: https://jsfiddle.net/9jbswr6d/1/

<html>
<head>
<!--official Bootstrap CDN-->
<link href="https://cdn.jsdelivr.net/npm/[email protected] 
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/[email protected] 
beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384- 
ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" 
crossorigin="anonymous"></script> 
</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...