Estoy creando una barra de navegación con bootstrap v5. y estoy copiando el código del sitio web de arranque. y también creé código JavaScript pero no funciona.
mi código :
<!DOCTYPE html> <html lang="en"> <title>rest api</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <script src="jquery/jquery-1.11.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <style> body { box-sizing: border-box; display: grid; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; hyphens: auto; text-align: center; } </style> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <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> </div> </nav> <script> $('.dropdown-menu').click(function(){ var parent = $(this).parent(); if(parent.hasClass('open')) { parent.removeClass('open'); } else { parent.addClass('open'); } }); </script> </body> </html>En realidad, su CDN que usó es incorrecto con la nueva versión de bootstarp. el siguiente código está funcionando bien:
<!DOCTYPE html> <html lang="en"> <title>rest api</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> <style> body { box-sizing: border-box; display: grid; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; hyphens: auto; text-align: center; } </style> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <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> </div> </nav> <script> $('.dropdown-menu').click(function(){ var parent = $(this).parent(); if(parent.hasClass('open')) { parent.removeClass('open'); } else { parent.addClass('open'); } }); </script> </body> </html>