LordRaiders LordRaiders - 5 months ago 7
jQuery Question

Bootstrap dropdown click doesn't work

I have a problem with my Bootstrap dropdown. When I click the button the menu doesn't show.

I know this question is asked many times before and I watched some tutorials on Youtube on how to make them but nothing works.

I tried many versions of Jquery and bootstrap js, I moved the scripts to the bottom of the code and I added this code:

$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});


This is what I have now:



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<!-- link javascript -->
<script src="http://www.ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/dropdown.js"></script>

<!-- link CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<!-- other stuff on my page -->

<!-- ADMIN TOOLS -->
<div class="adminToolsContainer">
<!-- dropdown -->
<div class="dropdown">
<!-- Drowdown button -->
<button class="btn btn-default drowdown-toggle" type="button" data-toggle="dropdown">
<!-- Button title and arrow -->
Admin tools <span class="caret"></span>

<!-- Dropdown content -->
<ul class="dropdown-menu">
<li class="dropdown-header">Blog</li>
<li><a href="#">Post lijst</a></li>
<li><a href="#">Maak post</a></li>
<li class="divider"></li>
<li class="dropdown-header">Accounts</li>
<li><a href="#">Gebruikerslijst</a></li>
<li><a href="#">Gebruiker toevoegen</a></li>
</ul>
</button>
</div>
</div>
<!-- END OF ADMIN TOOLS -->
</body>





I hope someone knows a solution. I don't know why but I always have trouble when I have to link Jquery and the bootstrap javascript.

Thanks for helping.

Answer

Move .dropdown-menu to out of the button

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <!-- link CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</head>

<body>

  <!-- other stuff on my page -->

  <!-- ADMIN TOOLS -->
  <div class="adminToolsContainer">
    <!-- dropdown -->
    <div class="dropdown">
      <!-- Drowdown button -->
      <button class="btn btn-default drowdown-toggle" type="button" data-toggle="dropdown">
        <!-- Button title and arrow -->
        Admin tools <span class="caret"></span>
      </button>
      <!-- Dropdown content -->
      <ul class="dropdown-menu">
        <li class="dropdown-header">Blog</li>
        <li><a href="#">Post lijst</a>
        </li>
        <li><a href="#">Maak post</a>
        </li>
        <li class="divider"></li>
        <li class="dropdown-header">Accounts</li>
        <li><a href="#">Gebruikerslijst</a>
        </li>
        <li><a href="#">Gebruiker toevoegen</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- END OF ADMIN TOOLS -->

  <!-- link javascript -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>

</html>

Comments