1

Meu menu dropdown não funciona.

<div class="btn-group">
  <button type="button" class="btn btn-warning">Menu Dropdowb</button>
  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Submenu1</a></li>
    <li><a href="#">Submenu2</a></li>
    <li><a href="#">Submenu3</a></li>
    <li class="divider"></li>
    <li><a href="#">Submenu4</a></li>
  </ul>
</div>
    <script type="text/javascrip">
$('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});
$('.dropdown-menu').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});
 $(document).ready(function () {
         $('.dropdown-toggle').dropdown();
     }); 

</script>
5
  • Tem como colocar o HTML do drop down? Commented 24/03/2015 às 20:07
  • @PauloHDSousa. O HTML não cabe. O que eu coloquei foi o do dropdown e a ativação do javascipt. Obrigado. Commented 24/03/2015 às 20:46
  • Por favor, crie um snippet de código, reproduzindo o problema, para que fique mais fácil ajudá-lo. Adicione também se puder um print da sua tela, caso o problema seja com a apresentação. Adicione informações sobre qual browser está usando, qual sistema, assim teremos mais contexto para poder dar uma resposta mais assertiva. Commented 24/03/2015 às 23:39
  • tente utilizar o jsfiddle.net para ter um exemplo real para que possamos te ajudar rapidamente. Commented 25/03/2015 às 1:27
  • eu coloquei o css, mas não os scripts javascript do bootstrap Commented 27/04/2022 às 13:38

2 Respostas 2

2

O Bootstrap possui uma dependência: jQuery. Basta incluir o código da biblioteca antes de incluir o arquivo bootstrap.js (ou bootstrap.min.js).

<!doctype html>

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'/>

<div class="btn-group">
  <button type="button" class="btn btn-warning">Menu Dropdown</button>
  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  <span class="caret"></span>
  <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Submenu1</a></li>
    <li><a href="#">Submenu2</a></li>
    <li><a href="#">Submenu3</a></li>
    <li class="divider"></li>
    <li><a href="#">Submenu4</a></li>
  </ul>
</div>
    
<script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
<script>
  $(function () {
    $('.dropdown-toggle').dropdown();
  }); 
</script>

2
  • Obrigado @Renan. Bastou incluir o <script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>. Fiz as correções conforme o seu exemplo. Commented 25/03/2015 às 12:38
  • como faz com o jquery 3 ???
    – Guihgo
    Commented 21/06/2016 às 1:07
0

Veja se não está faltando o <!DOCTYPE html> no topo do documento HTML.

Se não tiver isso, vai ficar esquisito mesmo assim:

inserir a descrição da imagem aqui

Ao colocar o DOCTYPE corretamente vai ficar assim:

inserir a descrição da imagem aqui

2
  • Está com Doctype no inicio. Estranho que ele esta preto. Obrigado pela dica. Mas eu copiei e colei e nada, ainda. Commented 24/03/2015 às 21:04
  • Você poderia adicionar um print da sua tela na questão, ou então criar um fiddle ou um snippet que reproduza o problema? Commented 24/03/2015 às 21:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .