El menú desplegable de Twitter Bootstrap 2 no funciona

StackOverflow https://stackoverflow.com/questions/9334205

  •  27-10-2019
  •  | 
  •  

Pregunta

¡Buen día! Estoy tratando de implementar el menú desplegable de ejemplos en mi sitio.Pero no funciona (el menú desplegable no se muestra en absoluto).Incluí todos los archivos js y css necesarios, el marcado es el mismo que en los documentos.

¿Puedes ver lo que estoy haciendo mal? 

<link type="text/css" href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">

<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-dropdown.js"></script>

...

<body>
<div class="navbar .navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">
                Brand
            </a>

            <ul class="nav">
                <li class="dropdown">
                    <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
                        Аккаунт
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" id="fat-menu">
                        <li><a>SubLink</a></li>
                        <li class="divider"></li>
                        <li><a>SubLink</a></li>
                    </ul>
                </li>
            </ul>

...


        </div>
    </div>
</div>

Muchas gracias.

¿Fue útil?

Solución

El problema era que faltaba el bloque js en el archivo html, requerido para una función específica.

El bit de código que faltaba era: 

$('.dropdown-toggle').dropdown()

Otros consejos

No está vinculando correctamente su enlace de navegación principal a su menú desplegable, pruebe esto: 

<ul class="nav">
    <li class="dropdown" id="fat-menu"> /* notice the reference to your dropdown link #fat-menu */
        <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
            Аккаунт
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a>SubLink</a></li>
            <li class="divider"></li>
            <li><a>SubLink</a></li>
        </ul>
    </li>
</ul>

Demostración: http://jsfiddle.net/u5vhS/1/

Normalmente solía olvidarme de uno de estos:

  • html adecuado
  • vincular a jquery.js y bootstrap-dropdown.js
  • comprobando si lo vinculé correctamente (parece redundante, pero ciertamente me ayudó)
  • llamando al menú desplegable: $ ('. dropdown-toggle'). dropdown ()

Sé que esto puede parecer una tontería, pero cuando ve la fuente (haciendo clic con el botón derecho), ¿son correctas las direcciones de los archivos JavaScript?Es posible que {{STATIC_URL}} no sea correcto.Intente copiar y pegar las direcciones de la fuente en la barra de direcciones.Asegúrese de ver realmente el contenido de los archivos JavaScript.

Me enfrentaba al mismo problema.Comentar el enlace para bootstrap-dropdown.js lo resolvió.Solo necesitaba bootstrap.min.js

That will happen if you override li somewhere in your css. For example, if you have an other stylesheet with content:

li {
    list-style: none;
    margin-bottom: 20px;
    overflow: hidden;
    padding-bottom: 25px;
    position: relative;
}

It will not work. Make sure there is no conflict.

Try to upgrade your jQuery library, it solved the same problem for me.

Had the same issue on a .net project (drop down menu not showing at all), however offcial bootstrap samples worked fine. Upgrading jQuery library on my project from 1.6.1 to 1.8.2 solved the problem.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top