Lista desplegable de Twitter Bootstrap no funciona

¿Alguna idea de por qué este menú desplegable de Twitter Bootstrap no funciona?Lista desplegable de Twitter Bootstrap no funciona

Javascript en la cabeza:

<script src="/assets/js/bootstrap.js" type="text/javascript"></script>

menú HTML:

   <li class="dropdown"> 
       <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
        <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="/app/1">Item A</a></li> 
        <li><a href="/app/2">Item B</a></li> 
        <li><a href="/app/3">Item C</a></li> 
       </ul> 
       </li>

Fuente

2012-09-21 Snowcrash

¿En qué orden está cargada su js? jQuery va primero como siempre, segundo bootstrap. –

Si tiene bootstrap.js (no bootstrap.min.js), tampoco * debería * agregar bootstrap-dropdown.js. Eso hizo el truco para mí. – Fahrenheit

Prueba agregar a dom-ready: menú desplegable de $ ('. Dropdown-toggle').(); – user956584

Ponga la clase desplegable en un div que está terminando la li en lugar de en el propio li. Así ...

 <div class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
     ... 
     </ul> 
     </div>

Ese ejemplo es del bootstrap site

El código debería tener este aspecto ...

<!DOCTYPE html > 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
    <script type="text/javascript" src="../plugins/js/bootstrap-dropdown.js"></script> 
    <link href="../theme/bootstrap.css" rel=stylesheet type="text/css"> 

    </head> 
    <div class="dropdown"> 
     <ul class="dropdown"> 
     <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
      <b class="caret"></b> 
     </a> 
      <ul class="dropdown-menu"> 
       <li><a href="/app/1">Item A</a></li> 
       <li><a href="/app/2">Item B</a></li> 
       <li><a href="/app/3">Item C</a></li> 
      </ul> 
     </ul> 
    </div>

Traté de hacer una lista anidada, pero no lo hizo trabajar con bootstrap Creo que confunde los dos desplegables.

Fuente

2012-09-21 17:46:18 noel

Lo intenté y se ve horrible. Además, no funciona. Verificando su sitio web, no es así como lo están haciendo. P.ej. mira aquí: http://twitter.github.com/bootstrap/javascript.html#dropdowns – Snowcrash

Copio y pegué mi ejemplo directamente desde su sitio. No entiendo lo que quieres decir. Necesitamos un ejemplo de su sitio para ayudarlo más. – noel

Este es el primer código que he encontrado que realmente funciona. Gracias. –

Asegúrese de que está utilizando la última versión de jQuery

Fuente

2013-05-11 13:04:17

Esto se resuelve fácilmente. El elemento que envuelve tu código es un li, pero necesita ser un div. Esto funciona para mí:

<div class="dropdown"> 
    <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
    <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
    <li><a href="/app/1">Item A</a></li> 
    <li><a href="/app/2">Item B</a></li> 
    <li><a href="/app/3">Item C</a></li> 
    </ul> 
</div>

enter image description here

Si usted quiere que se vea como un botón, basta con añadir "Bot" a la lista de clase como esta:

<a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" href="#">

Mi cabecera la sección se ve así:

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

Usted ma Quiero dejar de lado el CSS receptivo si no está haciendo nada para dispositivos móviles.

Fuente

2013-06-17 14:15:34 Graham

Lista desplegable de Twitter Bootstrap no funciona

Respuesta

Cuestiones relacionadas