El menú desplegable de Bootstrap no funciona

80

No puedo hacer que el menú desplegable de bootstrap funcione. Aquí está mi html para nav:

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Y aquí están los guiones:

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

¿Qué estoy haciendo mal? ¡Gracias por tus respuestas!

html  drop-down-menu  twitter-bootstrap 
— hjuster
fuente
Verifique mi respuesta en una publicación similar stackoverflow.com/questions/15592158/…
— Tejasvi Hegde
4
Mi problema era que faltaba el archivo bootstrap js, en caso de que eso ayude a otra persona
— Drewdavid
Había actualizado mi Gruntfile.jsque cambia algunas de las rutas en el jsFileList... Actualizar las rutas y ejecutar las tareas de Grunt apropiadas (grunt dev / grunt build / etc) resolvió mi problema.
— Ken Prince
1
@Drewdavid ¡Gracias! Me estaba perdiendo bootstrap.min.js y jquery
— lucidbrot

Respuestas:

12

Demostración de trabajo: http://codebins.com/bin/4ldqp73

prueba esto 

<ul class='nav'>
  <li class='active'>Home</li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">            
        <li><a href="#">asds</a></li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>
— gaurang171
fuente
56
El menú desplegable de su demostración parece que ya no funciona, o quizás el problema está en mi navegador.
— Noah
152

Yo tuve el mismo problema. Después de un par de horas de resolución de problemas, descubrí que,

tuve 

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

en vez de,

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

Espero que esto ayude a alguien

— Príncipe Ashitaka
fuente
1
¿Cual es la diferencia?
— CodyBugstein
9
Imray, el script de arranque registra extensiones en jQuery, por lo que si jQUery no está cargado, las extensiones nunca se registran.
— Amoliski
2
El orden es importante, de hecho. ¡Gracias por la ayuda!
— K.Land_bioinfo
Gracias. También trabajé para mi proyecto angular 10 en el archivo
— angular.json
86

Tuve el mismo problema cuando incluí bootstrap.min.jsdos veces. Quitó uno de ellos y comenzó a funcionar.

— kubilay
fuente
1
Esto solucionó mi problema. Mi aplicación angular estaba obteniendo múltiples copias de bootstrap a través de la tarea gulp para inyectar mis bower_components
— Pakage
Esto solucionó mi problema. Gracias
— Yudu Ban
esto lo solucionó en un proyecto ASP.NET MVC 5 con paquetes
— Klaasel
Me lo arregló. Gracias.
— Henry A.
realmente molesto ... usando aurelia-webpack-skeleton necesito importar bootstrap.css en mi main.js, pero si importo 'bootstrap', obtengo ese comportamiento extraño ...
— irónico
23

Para su información: Si tiene bootstrap.js, usted debe no añadir arranque-dropdown.js.

No estoy seguro del resultado con bootstrap.min.js.

— Fahrenheit
fuente
2
Gracias. Tenía tanto el dropdown.js como el bootstrap.js y, por lo tanto, no funcionó. La eliminación de dropdown.js resolvió el problema.
— nyxz
Eres el padrino, pasé alrededor de 6 horas en esto para encontrar dónde está el problema, gracias de nuevo ..
— Adel
1
¡Muchas gracias señor! Tengo el mismo problema, pero tengo bootstrap.jsy bootstrap.min.js.. Cuando eliminé este último, funciona.
1
Gracias - En mi caso, tuve ambos js/bootstrap.jsasí comojs/dropdown.js
— Sanjay Manohar
13

Para su estilo, debe incluir los archivos css de bootstrap, generalmente justo antes del </head>elemento

<link href="css/bootstrap.css" rel="stylesheet">

A continuación, deberá incluir los archivos js, se recomienda incluirlos al final del documento, generalmente antes de que las </body>páginas se carguen más rápido.

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>
— Ôûssàmâ Höûd
fuente
8

Agregue las siguientes líneas dentro de las etiquetas del cuerpo.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>
— Shevon Silva
fuente
Gracias, esto me ahorró algo de tiempo.
— DrewT
7

tienes que importar estos archivos a <head></head>tu html.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
— Martín
fuente
1
No tengo idea de por qué o qué estaba haciendo incorrectamente, pero esta respuesta lo hizo por mí. ¡Gracias Martin!
— dghalbr
Gracias. Tampoco sé por qué esto ha resuelto el problema. El menú funcionó bien con /js/jquery.js y /js/bootstrap.min.js hasta que el sitio web se migró a otro servidor de Windows.
— Hong
5

¿Has incluido jquery.js?

Además, compare esta línea de código con la suya:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

Vea esta versión que funciona bien.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>
— Frankline
fuente
4

Deben incluirse tanto bootstrap como jquery:

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

NOTA: ¡la versión de jquery-xxxmin.js debe ser la versión 2.xx !

— David Liao
fuente
4

Lo descubrí y la forma más sencilla de hacerlo es simplemente copiar y pasar el CDN del enlace de arranque que se puede encontrar en https://www.bootstrapcdn.com/ y los scripts de Jquery CDN que se pueden encontrar aquí https: // code.jquery.com/ y después de copiar los enlaces, los enlaces de arranque se pegan en el encabezado de HTML y el script de Jquery se pega en el cuerpo de HTML como en el siguiente ejemplo:

    <!DOCTYPE html>
    <html>
      <head>

        <title>Purrfect Match Landing Page</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--<link rel="stylesheet" href="griddemo.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

      </head>

      <body>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">      </script>    
      </body>
    </html>

Para mí funciona perfecto espero que funcione también para ti :)

— Atdhe Kurteshi
fuente
Gracias ! , moviéndolo antes de que las </body>etiquetas lo pongan en funcionamiento.
— Ryan Aquino
2

Prueba esto en la sección principal

<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">
— Hamza Javed
fuente
2

Aquí lo que hice es .....

Simplemente eliminé bootstrap.min.js de mi proyecto y agregué bootstrap.js y comenzó a funcionar ........

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));
— Mohit Dhawan
fuente
Agregando a #kubilay Respuesta: puede tener una sola clase llamada 'A' por documento. .min.css / .min.js: generalmente son los mismos archivos css y js con todos los espacios eliminados. Los hace más pequeños y se cargan más rápido. El navegador no necesitará espacios de todos modos.
— Mohit Dhawan
Quite uno si ha usado ambos
— Mohit Dhawan
2

Prueba este código:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Tutorial</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
— Nishant Ingle
fuente
1

Tendrá que verificar los archivos / propiedades css en conflicto, por ejemplo, podría tener contenido de estilo personalizado ".nav" en otro lugar, intente deshabilitar sus propios archivos css y verifique si eso funciona, luego verifique qué archivo o estilo personalizado hace que los conflictos también se aseguren está incluyendo bootstrap.min.js en su código

— Mancy
fuente
1

Tuve un problema similar solo para observar que había agregado el script de arranque dos veces y el segundo script de arranque estaba después de arriba del script de jquery.

Solución:

  • Asegúrese de que bootstrap.min.js y jquery.min.js solo se incluyan una vez en su archivo.
  • El script bootstrap.min.js debe incluirse después de jquery.min.js
— BK
fuente
1

Copie y pegue debajo de jQuery <script>y la hoja de estilo <link>en su <head>para asegurarse de que está cargando todos los archivos necesarios.

Es importante que su .jsarchivo JQuery esté por encima de la .csshoja de estilo

Simplemente pegue la siguiente línea para probar

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

El problema ocurre principalmente con la carga del script jQuery, asegúrese de agregar referencias correctamente.

Ahora prueba

Aún así, si no funciona, consulte el sitio web de bootstrap, tienen una implementación de muestra.

https://getbootstrap.com/docs/4.3/components/navbar/#supported-content

— Amir Dora.
fuente
1

Para la última versión de Bootstrap, necesitará Popper.js

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Copie el enlace en la sección Fin del cuerpo justo antes de la <body>etiqueta, dentro de la <Head>etiqueta.

— Sayed Muhammad Idrees
fuente
1

Acabo de agregar JSparte de bootstrapa mi página de índice, luego funcionó

Pegue esto, si está utilizando la última versión de bootstrap

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
— mecdeality
fuente
Es una pregunta para niños de más de 8 años con una respuesta aceptada ...
— Zsolt Meszaros
@ZsoltMeszaros Sí, lo sé. Pero hay otras personas que pueden enfrentar este problema
— mecdeality
0

Tuve el mismo problema que me trajo aquí.

Mi problema: estaba usando la versión recomendada de jquery 1.12.0 como mi archivo de script jquery.

Solución: reemplazó el script jquery con la versión jquery 2.2.0.

Eso me resolvió.

— Everest Nwosu
fuente
0

Para mí, fue un problema de CORS. quitecrossorigin="anonymous" de mis etiquetas script de importación, y comenzó a trabajar de nuevo.

Por cierto, las últimas etiquetas de script, en el orden correcto, siempre se pueden encontrar aquí: https://getbootstrap.com/

Editar: Aparentemente, agregar defera la scriptetiqueta también romperá todas las ventajas de Bootstrap.

— Cameron Hudson
fuente
0

Copie / pegue el enlace CSS seguido del enlace JS desde el sitio de arranque aquí . Entonces el menú desplegable debería funcionar.

Mi página se ve así:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <title>Website Title</title>
  </head>
  <body>
    <div id="content" />
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </body>
</html>

(Barra de navegación desde aquí )

— Pro Q
fuente
0

Mi (mismo) problema surgió cuando mezclé las versiones CSS y Bootstrap. Estaba usando la versión 3 bootstrap.min.js con la versión 4.5 bootstrap.min.css

Si cargó o sobrescribió un montón de archivos css y js en su carpeta estática recientemente, sería un buen lugar para comenzar.

Buena suerte.

— PowerAktar
fuente
-1

Lo configuré con Angular 7, jQuery 3.4.1, Popper 1.12.9 y Bootstrap 4.3.1, nada me funcionaba hasta que hice este pequeño truco en estilos:

.dropdown.show .dropdown-menu {
    opacity: 1 !important;
}

HTML tiene este aspecto:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
 <div class="container-fluid">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
                aria-expanded="false">Menu</button>
            <div class="dropdown-menu" aria-labelledby="dropdown-id">
                <a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
                <a class="dropdown-item" [routerLink]='["/about"]'>About</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
                <a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
            </div>
        </li>
     </ul>
  </div>
</nav>
— 0lukasz0
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.