How to make the dropdown menu work?

Asked

Viewed 116 times

0

I’m making a website with bootstrap, but the dropdown menu does not work, below a code snippet:

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

I believe it is because some bootstrap department is missing, but I do not know which one. I have tried several links in my code, but it still doesn’t work.

Note: These "null" within the items was my friend (which obviously does not match the ideas) who put, in his head this must have made sense kk

javascript css dropdown

  • you linked the bootstrap and jquery in your project?

  • Bootstrap yes, jquery I’m not familiar with, and I don’t know which library is responsible for the dropdown.

  • try to add this and see if it’s right <script src="https://code.jquery.com/jquery-3.4.1.js" Integrity="sha256-Wpoohjoqmqqykl9fccasb9o0kwacqjpftubltyovvvu=" crossorigin="Anonymous"></script>

1 answer

0


Just activate via jquery if you have already added the bootstrap components

$('.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>

  • I had tested it just now and it worked, I just downloaded the jquery and Linkei in the folder of my project, but vlw even so, the staff here is helpful mt, thank you all for the strength!

Browser other questions tagged javascript css dropdown

You are not signed in. Login or sign up in order to post.