Menu suspenso com Twitter Bootstrap

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

Pergunta

Na sequência de esta questão , ainda estoulutando com o Twitter Bootstrap.Eu consegui fazer minha barra de navegação aparecer e estou tentando adicionar um menu suspenso a ela.Não importa o que eu tente, não consigo fazer a parte suspensa do menu funcionar!Aqui está uma captura de tela do meu menu.

navigation bar

Como você pode ver, eu tenho "Configurações da conta", que deveria ser um menu suspenso, mas quando clico nele, nenhuma opção suspensa aparece.Abaixo está meu 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 você pode ver, estou me referindo ao arquivo suspenso Javascript do Twitter.Eu também tentei fazer referência a isso localmente, o que não fez diferença.Também incluí o Javascript que acredito que deva ligar o menu suspenso e chamar o arquivo Javascript do Twitter.

Não sei por que isso não está funcionando

Foi útil?

Solução

Não consigo ver onde você está incluindo jQuery em seu código.Você precisa incluí-lo antes de todos os outros scripts para que o menu suspenso funcione.

Aqui está o script jQuery do google CDN: 

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

Outras dicas

Lembre-se de que também é redundante usar este código em seu exemplo: 

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

Porque não está fazendo nada.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top