O menu suspenso do Twitter Bootstrap 2 não funciona

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

  •  27-10-2019
  •  | 
  •  

Pergunta

Bom dia! Estou tentando implementar o menu suspenso de exemplos no meu site.Mas não funciona (o menu suspenso não está sendo exibido).Incluí todos os arquivos js e css necessários, a marcação é a mesma dos documentos.

Você pode ver o que estou fazendo de errado? 

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

Muito obrigado.

Foi útil?

Solução

O problema estava na falta do bloco js no arquivo html, necessário para um recurso específico.

O bit de código ausente era: 

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

Outras dicas

Você não está vinculando corretamente o link de navegação principal ao menu suspenso, tente isto: 

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

Demonstração: http://jsfiddle.net/u5vhS/1/

Costumava esquecer um destes:

  • html adequado
  • links para jquery.js e bootstrap-dropdown.js
  • verificar se vinculei corretamente (parece redundante, mas certamente me ajudou)
  • chamando o menu suspenso: $ ('. dropdown-toggle'). dropdown ()

Sei que pode parecer bobagem, mas quando você visualiza a fonte (clicando com o botão direito), os endereços dos arquivos JavaScript estão corretos?É possível que {{STATIC_URL}} não esteja correto.Tente copiar e colar os endereços da fonte na barra de endereços.Certifique-se de ver realmente o conteúdo dos arquivos JavaScript.

Eu estava enfrentando o mesmo problema.Comentar o link para bootstrap-dropdown.js resolveu isso.Eu só precisava de bootstrap.min.js

Isso acontecerá se você substituir li em algum lugar do seu css.Por exemplo, se você tiver outra folha de estilo com conteúdo: 

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

Não vai funcionar.Certifique-se de que não haja conflito.

Tente atualizar sua biblioteca jQuery, isso resolveu o mesmo problema para mim.

Tive o mesmo problema em um projeto .net (o menu suspenso não apareceu), mas os exemplos de bootstrap oficiais funcionaram bem.Atualizar a biblioteca jQuery em meu projeto de 1.6.1 para 1.8.2 resolveu o problema.

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