Menú desplegable con Twitter Bootstrap

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

Pregunta

Siguiendo con esta pregunta , todavía estoyluchando con Twitter Bootstrap.Me las arreglé para que aparezca mi barra de navegación y estoy tratando de agregarle un menú desplegable.No importa lo que intente, ¡no puedo hacer que funcione la parte desplegable del menú!Aquí hay una captura de pantalla de mi menú.

barra de navegación

Como puede ver, tengo "Configuración de la cuenta", que debería ser un menú desplegable, pero cuando hago clic en él, no aparecen opciones desplegables.A continuación se muestra mi código: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>

    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>

    <link href="@Url.Content("~/Content/bootstrap.min.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="#">Present Ideas</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Help</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Login</a></li>
                            <li><a href="#">Register</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        @RenderBody()
    </div>
</body>
</html>

Como puede ver, estoy haciendo referencia al archivo Javascript desplegable de Twitter.También intenté hacer referencia a esto localmente, lo que no hizo ninguna diferencia.También incluí el Javascript que creo que debería conectar el menú desplegable y llamar al archivo Javascript de Twitter.

No sé por qué esto no funciona

¿Fue útil?

Solución

No veo dónde está incluyendo jQuery en su código.Tienes que incluirlo antes que todos tus otros scripts para que funcione el menú desplegable.

Aquí está la secuencia de comandos jQuery de Google CDN: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Otros consejos

Tenga en cuenta que también es redundante utilizar este código en su ejemplo: 

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

Porque no está haciendo nada.

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