Menú desplegable con Twitter Bootstrap

Después de this question, todavía estoy luchando con Twitter Bootstrap. Logré que aparezca mi barra de navegación y estoy intentando agregarle un menú desplegable. ¡No importa lo que intente, no puedo hacer que la parte desplegable del menú funcione! Aquí hay una captura de pantalla de mi menú.Menú desplegable con Twitter Bootstrap

navigation bar

Como se puede ver, no tengo "Configuración de cuenta" que debe ser un menú desplegable, pero cuando hago clic en él, sin desplegables aparecen las opciones. Debajo está 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 puedes ver, estoy haciendo referencia al archivo desplegable Javascript de Twitter. También intenté hacer referencia a esto localmente, lo que no hizo ninguna diferencia. También he incluido el Javascript que creo que debería conectar el menú desplegable y llamar al archivo Javascript de Twitter.

Estoy en una pérdida de por qué esto no está funcionando

Fuente

2012-02-17 Stu

no puedo ver donde está incluyendo jQuery en el código. Debe incluirlo antes de que todos los demás scripts funcionen para el menú desplegable.

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

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

Fuente

2012-02-17 19:20:44

¡Maravilloso! Eso funcionó un placer. Originalmente tenía el guión de 1.5 jQuery incluido, pero parece que la versión 1.7 es lo que se necesita. También cambié el orden en mi encabezado; ahora incluyo el archivo CSS y luego los guiones porque a la inversa causó que mi barra de navegación se dividiera en 2 líneas. Gracias por tu ayuda. – Stu

mente también es redundante para utilizar el código en tu ejemplo:

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

Debido a que no está haciendo nada.

Fuente

2012-04-24 10:12:16

Menú desplegable con Twitter Bootstrap

Respuesta

Cuestiones relacionadas