O menu suspenso Bootstrap não está funcionando

100

Estou tendo problemas para fazer meus menus suspensos funcionarem. Posso fazer com que a barra de navegação apareça perfeitamente, mas quando clico em "Dropdown" (qualquer um deles), o menu suspenso não é exibido. Eu tentei procurar outros posts sobre isso, mas nada que resolvesse os problemas de todos ajudou. Copiei o código-fonte direto do site do bootstrap, mas não consigo fazê-lo funcionar na minha máquina. Alguém tem alguma ideia? Estou olhando para ele há uma hora e não consigo descobrir qual é o problema.

<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-    target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" >
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

javascript jquery html css twitter-bootstrap user2540528
fonte
1
Desculpe, no trabalho quando escrevi isso. Eu editei a explicação.
user2540528
Você poderia nos dar o link? @ user2540528
STP38
O link para o arquivo JS?
user2540528
1
Acabei de copiar seu código e adicionar js / css e funciona na minha máquina
Chris
'Copiei a fonte direto do site do bootstrap' @ user2540528, você pode me dar esse link?
STP38 de

Respostas:

142

Talvez tente com 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

e veja se funciona.

Chris
fonte
Isso resolveu. Alguma razão pela qual os arquivos locais não funcionariam? E essas fontes js se eu implantar isso em um domínio correto? Só quero ter certeza de que meu aplicativo ainda funciona depois que eu terminar e publicar. (É o meu primeiro, é por isso que pergunto)
user2540528
@ user2540528 Provavelmente o arquivo tem um nome diferente jquery-1.11.0.jsou não existe.
Chris
user2540528 Você pareceu sentir falta de bootstrap.css
Avec
1
Meu problema era que eu tinha o bootstrap.css no lugar certo, mas não tinha o bootstrap.min.js incluído no meu pacote
codingNightmares
Percebi que a ordem dessas linhas de código também é importante. Se você colocar o google apis como a última linha do código, não funcionará.
Efe Büyük
114

Eu tinha um projeto bootstrap + rails e o menu suspenso funcionou bem. Eles pararam de trabalhar após uma atualização ...

Esta é a solução que corrigiu o problema, adicione o seguinte ao arquivo .js:

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});
Iwan B.
fonte
Resolvido um problema que tive com o Bootstrap 3 e Rails 4.2, onde o menu suspenso funcionava apenas na primeira vez, mas não no segundo clique.
bovender
Projeto Grails com Spud CMS - Isso resolveu meu problema de alternância suspensa.
Tyler Rafferty
muito obrigado por isso 1. todos estão dizendo "adicione o jquery antes do bootstrap". mas foi assim. Só respondem, depois de mais de uma hora olhando, que funcionou!
MaNTiS
1
Isso me ajudou imensamente. Alguma ideia de por que essa correção é necessária?
Brack
1
Essa solução funcionou para mim. Acontece que importei o bootstrap do meu site duas vezes, depois que importei apenas uma vez, ele começou a funcionar sem a correção nesta solução.
harshpatel991
27

Solução 100% funcional

basta colocar seu link Jquery primeiro de todos os links js e css

Exemplo correto 

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />

Exemplo errado!

<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>
Hidayat ullah
fonte
Não funcionou no meu caso. Tive que usar a solução de Iwan B..
toddmo
1
@Nabin Funciona porque temos que carregar o jquery primeiro e depois o bootstrap, já que o bootstrap usa o jquery
Siddaram H
@toddmo Funciona, basta verificar o jquery, bootstrap e css carregados corretamente ou não da aba networy no google crome dbugger
LMK
12

Coloque o link jquery js antes do link js bootstrap assim:

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

ao invés de:

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
Seyibabs
fonte
Put the jquery css ...>Put the jquery js ...
allcaps de
2
Suas palavras estão corretas, mas os blocos de código são o oposto do que você diz.
Astra Bear
4

De acordo com getBootstrap.com, dropdowns são construídos na biblioteca Popper.js de terceiros. Portanto, se o menu suspenso não funcionar ao clicar, mas apenas ao passar o mouse sobre ele, inclua popper.js, bootstrap.js e bootstrap.css. Não incluir popper.js antes de incluir pacotes de bootstrap pode ser um dos motivos.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>

https://getbootstrap.com/docs/4.0/components/dropdowns/

nikhilmeth
fonte
1
Para a versão 4 esta é a resposta que é uma grande mudança quando estamos acostumados a incluir apenas Jquery e bootstrap em nossos projetos.
Vindic
1
Sim, a ordem realmente importa.
nikhilmeth
Este é o que funcionou para mim. Copiei os mesmos códigos da página Bootstrap, mas esta é a ordem certa em que deveriam estar.
DuckRodgers
3

Enfrentei isso enquanto estava usando ASP .NET Forms. A solução que usei foi excluir ou comentar as referências jQuery e Bootstrap da <asp:ScriptManager runat="server">página mestra. Parece que isso cria um conflito com as referências jQuery e Bootstrap que você colocou no <header>.

Mohammad AlShaabi
fonte
2

No caso de alguém ainda enfrentar o mesmo problema, certifique-se de verificar o código-fonte da sua página de visualização em seu navegador para verificar se todos os arquivos jquery e bootstrap estão carregados e os caminhos para o arquivo estão corretos. Mais importante! certifique-se de usar o arquivo jquery estável mais recente.

Munam Yousuf
fonte
2

Talvez alguém lá fora possa se beneficiar com isso:

Resumo (também conhecido como tl; dr)

Os menus suspensos de bootstrap pararam de cair devido à atualização de uma django-bootstrap3versão 6.2.2para 11.0.0.

fundo

Encontramos um problema semelhante em um djangosite legado que depende muito do bootstrapthrough django-bootstrap3. O site sempre funcionou bem e continuou a funcionar em produção, mas não em nosso sistema de teste local. Não havia mudanças óbvias relacionadas no código, então um problema de dependência era o mais provável.

Sintomas

Ao visitar o site no servidor de teste django local , parecia perfeitamente OK à primeira vista: estilo / layout usando bootstrapcomo esperado, incluindo a barra de navegação. No entanto, todos os menus suspensos falharam.

Sem erros no console do navegador. Todos os arquivos estáticos jse cssforam carregados com êxito e a funcionalidade de outros pacotes confiáveis jqueryfuncionou conforme o esperado.

Solução

Descobrimos que o django-bootstrap3pacote em nosso ambiente python local foi atualizado para a versão mais recente 11.0.0, enquanto o site foi construído usando 6.2.2.

Reverter para django-bootstrap3==6.2.2resolver o problema para nós, embora eu não tenha ideia do que exatamente o causou.

djvg
fonte
1

Estou usando o Rails 4.0 e tive o mesmo problema

Aqui está minha solução que passou no teste

adicionar ao Gemfile

gem 'bootstrap-sass'

corre

bundle install

em seguida, adicione a app / assets / javascripts / application.js

//= require bootstrap

Então a lista suspensa deve funcionar

A propósito, a solução de Chris também funciona para mim.

Mas acho que está menos de acordo com a ideia de pipeline de ativos

user1143669
fonte
0

Parece que há mais a ser feito no Rails 4.

  1. Dentro de você adicionar Gemfile.

    gem 'bootstrap-sass', '~> 3.2.0.2'

como visto aqui

  1. Em seguida, você precisa executar

    $ bundle install

Esta é a parte que ninguém mencionou

Abra seu arquivo config / application.rb

  1. adicione isso antes do penúltimo fim

    config.assets.precompile + =% w (*. png * .jpg * .jpeg * .gif)

como visto aqui cerca de 20% na página.

  1. Em seguida, crie um arquivo custom.css.scss neste diretório

    app / assets / stylesheets

como visto aqui um pouco mais abaixo da tarefa acima

  1. Dentro desse arquivo inclua

    @import "bootstrap";

Agora pare o servidor e reinicie e tudo deve funcionar bem.

Tentei executar o bootstrap sem usar uma gema, mas não funcionou para mim.

Espero que ajude alguém!

Wes Duff
fonte
0

Acho que é a questão da rota do seu arquivo de rota. Nem o bootstrap nem o arquivo JQuery.

Alvian Casablancas
fonte
0

No meu caso, desativar as extensões do Chrome corrigiu isso. Eu os removi do Chrome um por um até encontrar o culpado.

Como sou o autor da extensão ofensiva do Chrome, acho melhor consertar a extensão!

toddmo
fonte
0

Minha versão de bootstrap estava apontando para bootstap4-alpha,

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>

alterado para 4-beta

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>

e começou a funcionar

Siddaram H
fonte
0

o problema é que href é href = "#" você deve remover href = "#" em todas as tags

Victor Jimenez
fonte
0

Para o Bootstrap 4, você precisa de uma biblioteca adicional. Se você ler o console do navegador, o Bootstrap imprimirá uma mensagem de erro informando que você precisa dele para que o menu suspenso funcione.

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
luskbo
fonte
0

em projetos angulares, adicionamos angular-cli.json ou angular.json a estas linhas:

      "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"

  ],
ATEF CHAREF
fonte
0

Tentei todas as respostas acima e a única versão que funciona para mim é a jquery 1.11.1 . Tentei com todas as outras versões 1.3.2, 1.4.4, 1.8.2, 3.3.1 e o menu suspenso da barra de navegação não funciona.

<script src="jquery/jquery-1.11.1.min.js"></script>
Zeke
fonte
0

Se você enfrentar o problema no Ruby on Rails , a solução completa é fornecida pelo arquivo leia-me do Bootstrap Ruby Gem .

ou em suma:

  1. renomear application.cssparaapplication.scss
  2. adicionar @import "bootstrap";
  3. adicione a gem 'jquery-rails'a Gemfilemenos que exista.
  4. adicionar //= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets a application.js.
Esmaeil MIRZAEE
fonte