0

Estou fazendo um site com bootstrap, mas o menu dropdown não funciona, abaixo um trecho do código:

  <li class="nav-item dropdown active">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Cadastros
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">null</a>
      <a class="dropdown-item" href="#">null</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">null</a>
    </div>
  </li>
  <li class="nav-item dropdown active">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Lançamentos
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">null</a>
      <a class="dropdown-item" href="#">null</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">null</a>
    </div>
  </li>

Acredito que é porque está faltando linkar alguma depêndencia do bootstrap, mas não sei identificar qual. Já testei linkar varios no meu código, mas continua sem funcionar.

Obs: Esses "null" dentro dos itens foi meu amigo (que obviamente não bate bem das ideias) que colocou, na cabeça dele isso deve ter feito sentido kk

3
  • você linkou o bootstrap e o jquery no seu projeto?
    – Luan Brito
    21/08/2019 às 17:10
  • O bootstrap sim, o jquery eu não sou familiarizado, e não sei qual biblioteca dele é responsavel pelo dropdown. 21/08/2019 às 17:18
  • testa acrescentar isso e ve se da certo <script src="code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    – Luan Brito
    21/08/2019 às 17:25

1 Resposta 1

0

Basta ativar via jquery, caso já tenha adicionado os componentes do bootstrap

$('.dropdown-toggle').dropdown()
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<ul class="nav nav-pills">
  <li class="nav-item">
<a class="nav-link active" href="#">Ativo</a>
  </li>
  <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Ação</a>
  <a class="dropdown-item" href="#">Outra ação</a>
  <a class="dropdown-item" href="#">Algo mais aqui</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Link isolado</a>
</div>
  </li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Cadastros
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
  <a class="dropdown-item" href="#">null</a>
  <a class="dropdown-item" href="#">null</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">null</a>
</div>
  </li>
  <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Lançamentos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
  <a class="dropdown-item" href="#">null</a>
  <a class="dropdown-item" href="#">null</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">null</a>
</div>
  </li>
  <li class="nav-item">
<a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
<a class="nav-link disabled" href="#">Desativado</a>
  </li>
</ul>

1
  • Eu tinha testado isso agora há pouco e deu certo, só baixei o jquery e linkei na pasta do meu projeto, mas vlw mesmo assim, o pessoal aqui é mt prestativo, obrigado a todos pela força! 21/08/2019 às 17:52

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 .