El menú desplegable de Bootstrap no funciona

100

Tengo problemas para hacer que funcionen mis menús desplegables. Puedo hacer que la barra de navegación se muestre perfectamente, pero cuando hago clic en "Desplegable" (cualquiera de ellos) no muestra el menú desplegable. He intentado buscar en otras publicaciones sobre esto, pero nada de lo que solucionó los problemas de todos ayudó. Copié la fuente directamente del sitio web de bootstrap, pero parece que no puedo hacer que funcione en mi máquina. ¿Alguien tiene alguna idea? Lo he estado mirando durante una hora y parece que no puedo entender cuál es el problema.

<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-    target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" >
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

javascript jquery html css twitter-bootstrap usuario2540528
fuente
1
Lo siento, en el trabajo cuando escribí esto. Edité la explicación.
user2540528
¿Podrías darnos el enlace? @ user2540528
STP38
¿El enlace al archivo JS?
user2540528
1
Acabo de copiar su código y agregar js / css y funciona en mi máquina
Chris
'Copié la fuente directamente del sitio web de Bootstrap' @ user2540528, ¿me pueden dar ese enlace?
STP38

Respuestas:

142

Tal vez intente con 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

y ver si funciona.

Chris
fuente
Esto lo hizo. ¿Alguna razón por la que los archivos locales no funcionarían? ¿Y estas fuentes js si implemento esto en un dominio correcto? Solo quiero asegurarme de que mi aplicación siga funcionando después de terminarla y publicarla. (Es mi primero, por eso pregunto)
user2540528
@ user2540528 Probablemente el nombre del archivo sea diferente jquery-1.11.0.jso no esté allí en absoluto.
Chris
user2540528 Parecía extrañar bootstrap.css
Avec
1
Mi problema fue que tenía el bootstrap.css en el lugar correcto pero no tenía el bootstrap.min.js incluido en mi paquete
codingNightmares
Me di cuenta de que el orden de esas líneas de código también es importante. Si pones google apis como última línea de código, entonces no funciona.
Efe Büyük
114

Tenía un proyecto bootstrap + rails y el menú desplegable funcionaba bien. Dejaron de funcionar después de una actualización ...

Esta es la solución que solucionó el problema, agregue lo siguiente al archivo .js:

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});
Iwan B.
fuente
Resolvió un problema que tuve con Bootstrap 3 y Rails 4.2 donde el menú desplegable funcionaría solo la primera vez, pero no en el segundo clic.
bovender
Proyecto Grails con Spud CMS: esto resolvió mi problema de alternancia desplegable.
Tyler Rafferty
muchas gracias por esto 1. todos dicen "agregar el jquery antes del bootstrap". pero fue así. Esta es la única respuesta, después de más de una hora mirando, ¡que funcionó!
MaNTiS
1
Esto me ayudó muchísimo. ¿Alguna idea de por qué se necesita esta solución?
Brack
1
Esta solución funcionó para mí. Resultó que había importado bootstrap en mi sitio dos veces, después de importarlo solo una vez, comenzó a funcionar sin la solución en esta solución.
harshpatel991
27

Solución de trabajo 100%

simplemente coloque su enlace Jquery primero que todos los enlaces js y css

Ejemplo correcto 

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />

¡Ejemplo incorrecto!

<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>
Hidayat ullah
fuente
No funcionó en mi caso. Tuve que usar la solución de Iwan B.
Toddmo
1
@Nabin Funciona porque, primero tenemos que cargar jquery y luego bootstrap, ya que bootstrap usa jquery
Siddaram H
@toddmo Funciona, solo verifique que jquery, bootstrap y css estén cargados correctamente o no desde la pestaña de red en google crome dbugger
LMK
12

Ponga el enlace jquery js antes del enlace bootstrap js así:

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

en vez de:

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
Seyibabs
fuente
Put the jquery css ...>Put the jquery js ...
allcaps
2
Tus palabras son correctas pero los bloques de código son lo opuesto a lo que dices.
Astra Bear
4

Según getBootstrap.com, los menús desplegables se basan en la biblioteca de terceros Popper.js. Por lo tanto, si el menú desplegable no funciona al hacer clic, pero funciona solo al pasar el mouse por encima del menú desplegable, incluya popper.js, bootstrap.js y bootstrap.css. No incluir popper.js antes de incluir los paquetes bootstrap podría ser una de las razones.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>

https://getbootstrap.com/docs/4.0/components/dropdowns/

nikhilmeth
fuente
1
Para la versión 4, esta es la respuesta, que es un gran cambio cuando estamos acostumbrados a incluir solo Jquery y bootstrap en nuestros proyectos.
Vindic
1
Sí, el orden realmente importa.
nikhilmeth
Este es el que funcionó para mí. Copió los mismos códigos de la página de Bootstrap, pero este es el orden correcto en el que deberían estar.
DuckRodgers
3

Me enfrenté a esto mientras usaba ASP .NET Forms. La solución que utilicé fue eliminar o comentar las referencias de jQuery y Bootstrap de la <asp:ScriptManager runat="server">página maestra. Parece que crea un conflicto con las referencias de jQuery y Bootstrap que pones en <header>.

Mohammad AlShaabi
fuente
2

En caso de que alguien todavía tenga el mismo problema, asegúrese de verificar la fuente de su página de vista en su navegador para verificar si todos los archivos jquery y bootstrap están cargados y las rutas al archivo son correctas. ¡Lo más importante! asegúrese de utilizar el último archivo jquery estable.

Munam Yousuf
fuente
2

Tal vez alguien pueda beneficiarse de esto:

Resumen (también conocido como tl; dr)

Los menús desplegables de Bootstrap dejaron de aparecer debido a la actualización de la django-bootstrap3versión 6.2.2a 11.0.0.

Antecedentes

Nos encontramos con un problema similar en un legado djangositio que depende en gran medida bootstrapa través django-bootstrap3. El sitio siempre había funcionado bien y continuó haciéndolo en producción, pero no en nuestro sistema de prueba local. No hubo cambios obvios relacionados en el código, por lo que lo más probable es que haya un problema de dependencia.

Síntomas

Al visitar el sitio en el servidor de prueba local de django , se veía perfectamente bien a primera vista: estilo / diseño usando bootstrapcomo se esperaba, incluida la barra de navegación. Sin embargo, todos los menús desplegables no se desplegaron.

No hay errores en la consola del navegador. Todos los archivos estáticos jsy cssse cargaron correctamente, y la funcionalidad de otros paquetes en los que jqueryse confiaba funcionaba como se esperaba.

Solución

Resultó que el django-bootstrap3paquete en nuestro entorno python local se había actualizado a la última versión 11.0.0, mientras que el sitio se construyó con 6.2.2.

Retroceder para django-bootstrap3==6.2.2resolver el problema para nosotros, aunque no tengo idea de qué lo causó exactamente.

djvg
fuente
1

Estoy usando rieles 4.0 y encontré el mismo problema

Aquí está mi solución que pasó la prueba.

agregar a Gemfile

gem 'bootstrap-sass'

correr

bundle install

luego agregue a app / assets / javascripts / application.js

//= require bootstrap

Entonces el menú desplegable debería funcionar

Por cierto, la solución de Chris también funciona para mí.

Pero creo que se ajusta menos a la idea de la canalización de activos

usuario1143669
fuente
0

Parece que hay más por hacer para Rails 4.

  1. Dentro de usted, agregue Gemfile.

    gema 'bootstrap-sass', '~> 3.2.0.2'

como se ve aquí

  1. Luego necesitas correr

    $ paquete de instalación

Esta es la parte que nadie ha mencionado

Abra su archivo config / application.rb

  1. agregue esto justo antes del penúltimo final

    config.assets.precompile + =% w (*. png * .jpg * .jpeg * .gif)

como se ve aquí alrededor de un 20% hacia abajo en la página.

  1. A continuación, cree un archivo custom.css.scss en este directorio

    aplicación / activos / hojas de estilo

como se ve aquí un poco más abajo de la tarea anterior

  1. Dentro de ese archivo incluye

    @importar "bootstrap";

Ahora detenga su servidor y reinicie y todo debería funcionar bien.

Intenté ejecutar bootstrap sin usar una gema, pero no funcionó para mí.

¡Espero que ayude a alguien!

Wes Duff
fuente
0

Creo que es cuestión de la ruta de su archivo de ruta. Ni el bootstrap ni el archivo JQuery.

Alvian Casablancas
fuente
0

En mi caso, la desactivación de las extensiones de Chrome lo solucionó. Los eliminé de Chrome uno por uno hasta que encontré al culpable.

Como soy el autor de la extensión de Chrome ofensiva, ¡creo que será mejor que arregle la extensión!

Toddmo
fuente
0

Mi versión de bootstrap apuntaba a bootstap4-alpha,

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>

cambiado a 4-beta

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>

y empezó a funcionar

Siddaram H
fuente
0

el problema es que href es href = "#" debes eliminar href = "#" en todas las etiquetas

Víctor Jiménez
fuente
0

Para Bootstrap 4, necesita una biblioteca adicional. Si lee la consola de su navegador, Bootstrap realmente imprimirá un mensaje de error que le indicará que lo necesita para que el menú desplegable funcione.

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
luskbo
fuente
0

en proyectos angulares agregamos angular-cli.json o angular.json estas líneas:

      "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"

  ],
CHAREF ATEF
fuente
0

Probé todas las respuestas anteriores y la única versión que funciona para mí es jquery 1.11.1 . Probé con todas las demás versiones 1.3.2, 1.4.4, 1.8.2, 3.3.1 y el menú desplegable de la barra de navegación no funciona.

<script src="jquery/jquery-1.11.1.min.js"></script>
Zeke
fuente
0

Si enfrenta el problema en Ruby on Rails , la solución exhaustiva la proporciona el archivo Léame de Bootstrap Ruby Gem .

o en resumen:

  1. cambiar el nombre application.cssaapplication.scss
  2. añadir @import "bootstrap";
  3. agregar gem 'jquery-rails'aGemfile menos que exista.
  4. añadir //= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets a application.js.
Esmaeil MIRZAEE
fuente