Estoy teniendo problemas para conseguir mis listas desplegables para trabajar. Puedo obtener la barra de navegación, para mostrar a la perfección, pero cuando hago clic en «menú Desplegable» (cualquiera de ellos) no se muestra el menú desplegable. He intentado buscar en otros posts acerca de esto, pero nada de lo que fija todos los problemas de la ayudó. He copiado el código fuente directamente de bootstrap del sitio web, pero me parece que no puede conseguir que funcione en mi máquina. Alguien tiene alguna idea? He estado mirando por una hora y parece que no puede averiguar 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 -->

  • Lo siento, en el trabajo cuando escribí esto. He editado la explicación.
  • Podrías dar el link? @user2540528
  • El enlace para el archivo JS?
  • He copiado el código y añadió js/css y funciona en mi máquina
  • ‘He copiado la fuente directamente desde el bootstrap del sitio web’ @user2540528, me Puede dar ese vínculo?
  • sólo miré en el dev tools de chrome, y el JS estaba tirando un error, diciendo: «Error al cargar el recurso: el servidor responde con un estado de error 404 (No Encontrado) localhost:8080/BarApplication/resource/js/jquery-1.11.0.js de Dicho Error: Bootstrap JavaScript requiere de jQuery no detectada ReferenceError: $ no está definido».
  • getbootstrap.com/components/#navbar
  • Así que, básicamente, su jQuery no se ha cargado. compruebe si usted tiene en su servidor (localhost).

InformationsquelleAutor user2540528 | 2014-03-13

18 Comentarios

  1. 125

    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.

    • Este lo hizo. Alguna razón por la que los archivos locales que no iba a funcionar? Y estos js fuentes si puedo implementar esto en un dominio correcto? Sólo quiero asegurarme de que mi aplicación todavía funciona después de que me terminarlo y publicarlo. (Es mi primera, así que es por eso que pido)
    • Probablemente el archivo se denomina de forma diferente, a continuación, jquery-1.11.0.js o no existe en absoluto.
    • user2540528 Que parecía perderse bootstrap.css
    • OP tiene un error en su código.
    • Mi problema era que tenía el bootstrap.css en el lugar correcto, pero no tenía los bootstrap.min.js incluido en mi paquete
    • Me di cuenta de que el orden de esas líneas de código también es importante. Si pones en google api como última línea de código, entonces no funciona.
    • Podría ayudar a pre-pend cada uno de los enlaces con «http», como el «http://ajax.google…..».

  2. 100

    Tuve un bootstrap + proyecto rails, y desplegable funcionaba bien.
    Se detuvieron a obras después de una actualización…

    Esta es la solución que se ha solucionado el problema, agregue lo siguiente .archivo js:

    $(document).ready(function() {
    $(".dropdown-toggle").dropdown();
    });
    • Solucionado un problema que tenía con Bootstrap 3 y Rails 4.2 donde el menú es solamente la primera vez, pero no en el segundo clic.
    • Grails proyecto w/ Spud CMS – Esta solucionado mi desplegable alternar problema.
    • muchas gracias por este 1. todo el mundo dice «agregar jquery antes de que el bootstrap». pero no fue así. Esta es sólo la respuesta, después de más de una hora mirando, que funcionó!
    • ¿De dónde poner esto para solucionarlo? Tengo mi barra de navegación en las aplicaciones.html.erb y se coloca esta en las aplicaciones.js.erb y no parece solucionar el problema.
    • Yo también había una actualización y después de esa lista dejado de funcionar. Pero esta solución funcionó. Gracias de nuevo.
    • Esto me ayudó inmensamente. Alguna idea de por qué esta revisión es necesaria?
    • Esta solución funcionó para mí. Resultó que yo había importado de arranque en mi sitio dos veces, después me importó, sólo una vez, comenzó a trabajar sin la corrección en esta solución.
    • O si carga el desplegable dinámicamente después de que el documento está listo, usted puede tener las siguientes: $('body').on('click', '.dropdown-toggle', function () { $(this).dropdown(); });
    • Yo tenía el mismo problema que @harshpatel991 , yo estaba cargando bootstrap dos veces, por alguna razón, y después de la actualización de la página el desplegable no estaba funcionando.

  3. 24

    100% de la solución de trabajo de

    solo tienes que colocar el Jquery enlace primero de todos los js y css enlaces

    Ejemplo Correcta

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

    Ejemplo Mal!

    <script type="text/javascript" src='js/bootstrap.min.js'></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="jquery/jquery.js"></script>
    • No funcionó en mi caso. Tenía que usar Iwan B. la solución.
    • Funciona porque tenemos que cargar jquery primero y luego manos a la obra, ya que bootstrap utiliza jquery
  4. 12

    Poner el jquery js link antes de la js de bootstrap enlace así:

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

    lugar de:

    <script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
    • Put the jquery css ... > Put the jquery js ...
    • Tus palabras son correctas, pero los bloques de código son lo contrario de lo que usted dice.
  5. 2

    Me enfrenté a esta mientras yo estaba usando ASP .NET Formas. La solución que se utilizó fue la eliminación o comentando jQuery y Bootstrap referencias de la <asp:ScriptManager runat="server"> en la página principal. Parece que se crea un conflicto con jQuery y Bootstrap referencias que pones en el <header>.

  6. 1

    Estoy usando rails 4.0 y se topó con el mismo problema

    Aquí está mi solución, que pasa la prueba de

    añadir a Gemfile

    gem 'bootstrap-sass'

    ejecutar

    bundle install

    a continuación, añadir a app/assets/javascripts/application.js

    //= require bootstrap

    A continuación, la lista desplegable debe trabajar

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

    Pero creo que es menos se conforman los activos de canalización idea

  7. 1

    En caso de que alguien todavía se enfrentan a un mismo problema, asegúrese de comprobar su ver código fuente de la Página en su navegador para comprobar si todos los jquery y bootstrap carga los archivos y las rutas de acceso para el archivo son correctos. Más importante! asegúrese de utilizar la última versión estable de jquery archivo.

  8. 1

    De acuerdo a getBootstrap.com, cuadros de lista desplegables se construyen en la librería de terceros Popper.js. Por lo tanto, si el menú desplegable no funciona onclick, pero está trabajando sólo en el pase de la lista desplegable incluyen popper.js, bootstrap.js y bootstrap.css. No incluidos popper.js antes de incluir bootstrap paquetes 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/

    • Para la versión 4 esta es la respuesta que es un gran cambio cuando estamos acostumbrados a incluir sólo Jquery y bootstrap en nuestros proyectos.
    • Sí, el orden en que realmente importa.
  9. 1

    Tal vez hay alguien que puede beneficiarse de este:

    Resumen (un.k.una. tl;dr)

    Bootstrap listas desplegables dejado de descender debido a la actualización de django-bootstrap3 versión 6.2.2 a 11.0.0.

    Fondo

    Nos encontramos con un problema similar en un legado django sitio que se basa en gran medida en bootstrap a través de django-bootstrap3. El sitio siempre ha funcionado bien, y continúan haciéndolo en la producción, pero no en nuestro sistema de prueba. No hubo obvio relacionados con los cambios en el código, así que una dependencia problema era lo más probable.

    Síntomas

    Cuando visite el sitio en la local django servidor de prueba, se veía perfectamente el O. K. a primera vista: estilo/diseño utilizando bootstrap como era de esperar, incluyendo la barra de navegación. Sin embargo, todos los menús desplegables no pudo desplegable.

    Que No hay errores en el navegador de la consola. Todos estática js y css archivos se cargan correctamente, y la funcionalidad de otros paquetes de confiar en jquery estaba funcionando como se esperaba.

    Solución

    Resultó que el django-bootstrap3 paquete en nuestro local de ambiente python había sido actualizado a la última versión, 11.0.0, mientras que el sitio fue construido utilizando 6.2.2.

    Volver a django-bootstrap3==6.2.2 resuelto el problema para nosotros, aunque no tengo idea de qué es exactamente lo causó.

  10. 0

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

    1. Dentro de ti Gemfile agregar.

      joya ‘bootstrap-sass’, ‘~> 3.2.0.2’

    como se ve aquí

    1. Siguiente que usted necesita para ejecutar

      $bundle install

    Esta es la parte que nadie ha mencionado

    Abre config/de la aplicación.rb archivo

    1. agregar este derecho antes de la segunda a la última final

      config.de los activos.precompilar += %w(*.png *.jpg *.jpeg *.gif)

    como se ve aquí alrededor de un 20% inferior de la página.

    1. Siguiente crear una personalizada.css.secs archivo en este directorio

      app/assets/hojas de estilo

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

    1. Dentro de ese archivo incluyen

      @import «bootstrap»;


    Ahora parar el servidor y reiniciar y todo debería funcionar bien.

    He intentado ejecutar bootstrap sin el uso de una joya pero no funcionó para mí.

    Espero que ayude a alguien!

  11. 0

    En mi caso, la desactivación de las Extensiones de Chrome se corrigió. He borrado desde Chrome uno por uno hasta encontrar el culpable.

    Puesto que yo soy el autor de la misma extensión de Chrome, creo que es mejor fijar la extensión!

  12. 0

    Mi bootstrap versión se apunta a bootstap4-alfa,

    <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 se comenzó a trabajar

  13. 0

    Para el Bootstrap 4 necesitas un adicional de la biblioteca.
    Si usted lee su navegador de la consola, Bootstrap se imprimirá un mensaje de error diciendo que usted necesita para bajar a trabajar.

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

    angular proyectos añadimos angular de la cli.json o angulares.json tesis líneas:

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

    He intentado todas las respuestas anteriores y la única versión que funciona para mí es el jquery 1.11.1.
    He probado con todas las otras versiones 1.3.2, 1.4.4, 1.8.2, 3.3.1 y la barra de navegación desplegable no funciona.

    <script src="jquery/jquery-1.11.1.min.js"></script>
  16. -3

    Sólo tiene que utilizar esta 100% funcional truco para resolver el menú desplegable problema de arranque.

    Pegue tanto estos archivos en cualquier lugar en la página después de la apertura de la etiqueta body. Si usted pegarlos dentro del cuerpo de la etiqueta, a continuación, el problema persiste.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

Dejar respuesta

Please enter your comment!
Please enter your name here