navegacion hamburguesa ejemplos bootstrap barra jquery html css twitter-bootstrap

jquery - hamburguesa - El botón de contraer de la barra de navegación de bootstrap 3 no funciona



navbar bootstrap 4.3 1 (8)

Hice algunas modificaciones en la barra de navegación pero ahora el botón de alternar no responde al hacer clic. A continuación se muestra mi código. Donde me equivoco ??

CÓDIGO:

<body> <div class="navbar-wrapper"> <div class="container"> <div class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="./index.html">ossoc</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <button id="loginbutton" type="button" class="btn btn-primary narbar-btn"><i class="glyphicon glyphicon-log-in"></i>Login</button> <button type="button" class="btn btn-success navbar-btn"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button> </ul> </div> </div> </div> </div> </div>

Bueno, tuve el mismo problema que cuando agregué el siguiente código dentro de la etiqueta que solucioné mi problema:

<head> <meta name="viewport" content="width=device-width , initial-scale=1" /> </head>

Espero que esto les pueda ayudar chicos!

En <body> debes tener dos etiquetas <script> :

<script src="https://code.jquery.com/jquery-2.1.3.js"></script> <script src="js/bootstrap.js"></script>

El primero cargará jQuery desde el CDN, y el segundo cargará el Javascript de Bootstrap desde un directorio local (en este caso es un directorio llamado js ).

En caso de que pudiera ayudar a alguien, tuve un problema similar después de agregar Bootstrap 3 a mi proyecto MVC 4. Resultó que mi problema era que me refería a bootstrap-min.js en lugar de bootstrap.js en mi BundleConfig.cs.

No funciono

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap-min.js"));

Trabajó:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js"));

En mi caso, el problema se debió a cómo construí mi barra de navegación. Lo estaba haciendo a través de un complemento de jQuery para poder construir rápidamente componentes de Bootstrap a través de javascript.

Para cortar un enlace largo de la historia, los elementos de datos del botón a través de jQuery .data () dieron como resultado un botón de colapso que no funcionó, al hacerlo a través de .attr () se solucionó el problema.

Esto no funciona:

$this.addClass("navbar navbar-default") .append($("<div />").addClass("container-fluid") .append($("<div />").addClass("navbar-header") .append($("<button />").addClass("navbar-toggle collapsed") .attr("type","button") .attr("aria-expanded", "false") .data("target","#" + id) .data("toggle","collapse") .html("<span class=''sr-only''>Toggle navigation</span>" + "<span class=''icon-bar''></span>" + "<span class=''icon-bar''></span>" + "<span class=''icon-bar''></span>")) .append($("<a href=''#'' />").addClass("navbar-brand") .append(document.createTextNode(settings.label)))) .append($("<div />").addClass("collapse navbar-collapse").attr("id",id)));

Pero esto sí (con los cambios dejados en los comentarios):

$this.addClass("navbar navbar-default") .append($("<div />").addClass("container-fluid") .append($("<div />").addClass("navbar-header") .append($("<button />").addClass("navbar-toggle collapsed") .attr("type","button") .attr("aria-expanded", "false") .attr("data-target", "#" + id) //.data("target","#" + id) .attr("data-toggle", "collapse") // .data("toggle","collapse") .html("<span class=''sr-only''>Toggle navigation</span>" + "<span class=''icon-bar''></span>" + "<span class=''icon-bar''></span>" + "<span class=''icon-bar''></span>")) .append($("<a href=''#'' />").addClass("navbar-brand") .append(document.createTextNode(settings.label)))) .append($("<div />").addClass("collapse navbar-collapse").attr("id",id)));

Solo puedo asumir que esto está relacionado con la forma en que jQuery vincula .data (), no escribe los atributos a los elementos, sino que los adjunta al objeto jQuery. El uso de la versión .data () dio como resultado HTML:

<button class="navbar-toggle collapsed" aria-expanded="false" type="button" >

Donde como la versión .attr () da:

<button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-toggle="collapse" data-target="#6a2034fe-8922-4edd-920e-6bd0ea0b2caf">

Parece que Bootstrap necesita el atributo data-nnn en el HTML.

Necesitas cambiar en este marcado.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar collapse">

cambiar el

data-target=".navbar collapse"

a

data-target=".navbar-collapse"

Motivo: el valor de data-target es un nombre de cualquier clase de la división de navegación asociada. En este caso lo es

<div class="collapse navbar-collapse"> <-- Look at here <ul class="nav navbar-nav navbar-right"> ..... </div>

Js Fiddle Demo

Sólo mis 2 centavos, tenía:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

al final del cuerpo, no funcionaba, tenía que agregar crossorigin="anonymous" y ahora está funcionando, Bootstrap versión 3.3.6. ...

Sucedió conmigo, utilicé el archivo jquery.min.js que descargué desde el sitio bootstrap. No funciona, probé la misma página con otro archivo jquery.min.js. Funcionó bien, así que si te enfrentas a este problema, intenta hacer referencia a otros jquery. min.js en tu página e inténtalo de nuevo

Tuve un problema similar. Revisé el html varias veces y estuve seguro de que era correcto. Entonces empecé a jugar con el orden de jquery y bootstrap javascript.

Originalmente tuve bootstrap.min.js cargando ANTES de jquery.min.js. En este estado, el menú no se expandiría al hacer clic en el icono del menú.

Luego cambié el orden para que bootstrap.min.js viniera después de jquery.min.js, y esto resolvió el problema. No sé lo suficiente sobre javascript para explicar por qué esto causó el problema (o lo solucionó), pero eso fue lo que funcionó para mí.

Información adicional:

Ambos scripts se encuentran en la parte inferior de la página, justo antes de la etiqueta. Ambos scripts están alojados en CDN, no alojados localmente.

Si está bastante seguro de que su código es correcto, inténtelo.