Bootstrap dropdown menu not working

Asked

Viewed 19,485 times

1

My dropdown menu doesn’t work.

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

  • How to drop HTML?

  • @Paulohdsousa. HTML does not fit. What I put was the dropdown and javascipt activation. Thanks.

  • Please create a code snippet, playing the problem, so that it is easier to help you. Also add a print of your screen if you have a problem with the presentation. Add information about which browser you’re using, which system, so we’ll have more context to give a more assertive response.

  • try using https://jsfiddle.net/ to get a real example so we can help you quickly.

2 answers

2


Bootstrap has a dependency: jQuery. Just include the library code before including the file bootstrap.js (or 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>

  • Thanks @Renan. <script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>. I made the corrections according to your example.

  • as it does with jquery 3 ???

0

Make sure you’re not missing the <!DOCTYPE html> at the top of the HTML document.

If I don’t have it, it’s gonna get weird anyway:

inserir a descrição da imagem aqui

By placing the DOCTYPE correctly will stay like this:

inserir a descrição da imagem aqui

  • It’s with Doctype at the beginning. Strange that it’s black. Thanks for the tip. But I copied and pasted and nothing, yet.

  • You could add a print of your screen in the question, or else create a fiddle or a snippet that reproduces the problem?

Browser other questions tagged twitter-bootstrap

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