Estoy tratando de crear un menú desplegable usando Bootstrap con varias opciones, pero cuando hago clic en el botón, no aparece nada para seleccionar la opción. No estoy seguro de lo que está pasando.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A Basic HTML5 Template</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" > <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </head> <body> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="SelectOS" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Select option...</button> <div class="dropdown-menu" aria-labelledby="SelectOS"> <a class="dropdown-item" href="#">Linux</a> <a class="dropdown-item" href="#">Mac</a> <a class="dropdown-item" href="#">Windows</a> </div> </div> </body> </html>Utilice el atributo data-bs-toggle en lugar del atributo data-toggle .
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A Basic HTML5 Template</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </head> <body> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="SelectOS" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Select option...</button> <div class="dropdown-menu" aria-labelledby="SelectOS"> <a class="dropdown-item" href="#">Linux</a> <a class="dropdown-item" href="#">Mac</a> <a class="dropdown-item" href="#">Windows</a> </div> </div> </body> </html>