Alguna idea de por qué este Twitter Bootstrap desplegable no está funcionando?

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>
En qué orden se sus js cargado? jQuery va primero, como siempre, bootstrap segundo.
Si usted tiene bootstrap.js (no bootstrap.min.js), debe no también agregar bootstrap-dropdown.js. Que hizo el truco para mí.
Trate de añadir a dom-listo: $(‘.dropdown-toggle’).desplegable();
No es necesario vincular al documento listo función. Funciona sin JavaScript.

OriginalEl autor Snowcrash | 2012-09-21

3 Comentarios

  1. 7

    Poner la lista desplegable clase en un div que está envolviendo el li en lugar de en el li sí mismo. Como esto…

            <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>

    Que el ejemplo de la bootstrap sitio

    El código debe ser similar a este…

        <!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 trabajar con bootstrap. Creo que se pone los dos desplegables confundido.

    He intentado eso y se ve horrible. Además de que no funciona. La comprobación de su sitio web, que no es cómo lo está haciendo. E. g. mira aquí: twitter.github.com/bootstrap/javascript.html#dropdowns
    Puedo copiar y pegar de mi ejemplo, directamente desde su sitio. Yo no entiendo lo que quieres decir. Tenemos un ejemplo de su sitio web para ayudar a una más.
    Este es el primer código que he encontrado que funciona realmente. Gracias.
    Para mí fue importante – tanto bootstrap.js y bootstrap.min.js contiene todos los plugins en un solo archivo. Yo estaba incluido bootstrap-dropdown.js y no estaba funcionando:)
    Si el menú desplegable de la parte de la barra de exploración, twitter sí mismos sugieren que la clase en el interior del elemento de la lista. Inspeccionar elemento en la barra de navegación en la sección «Dentro de una barra de navegación» en twitter.github.io/bootstrap/javascript.html#desplegables

    OriginalEl autor noel

  2. 2

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

    OriginalEl autor A Star

  3. 2

    Esto se resuelve fácilmente. El elemento envolver el código es un li, pero tiene que ser de 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>

    Twitter Bootstrap desplegable no funciona

    Si quieres que se vea como un botón, sólo tiene que añadir «botón» de la clase a la lista como esta:

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

    Mi sección de encabezado se parece a esto:

    <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 lo desea, puede dejar fuera el responsive css si usted no está haciendo nada para dispositivos móviles.

    OriginalEl autor Graham

Dejar respuesta

Please enter your comment!
Please enter your name here