Geek Answers Handbook

Including unpacking bootstrap.min.js

I have navbar-collapse . If I use the code shown below, the dropdown menus stop working. (Clicking on a dropdown item does nothing.)

  <!-- Le styles --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/bootstrap-responsive.min.css" rel="stylesheet"> <style> body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } </style> <!-- Le javascripts --> <script type="text/javascript" src='/js/jquery-1.9.1.min.js'></script> <script type="text/javascript" src='/js/jquery.cookie.js'></script> <script type="text/javascript" src='/js/bootstrap.min.js'></script>

removing the ref link to bootstrap.min.js makes the dropdown lists correct. I am embarrassed. Shouldn't I include both .js and .css?

(I tried to include jQuery before css files. The same result.) (I also tried to include javascript before css. The same result.) All boot files were downloaded directly from the boot site.

+6
source share
1 answer

The link to the bootstrap.js file is important because the drop-down list function is included in it. Line 637 of bootstrap.js defines a dropdown definition. eg:

  var toggle = '[data-toggle=dropdown]' , Dropdown = function (element) { var $el = $(element).on('click.dropdown.data-api', this.toggle) $('html').on('click.dropdown.data-api', function () { $el.parent().removeClass('open') }) }

Similarly defined in bootstrap.min.js, which is a mini version of bootstrap.js. Removing the link to the bootstrap.js file will not cause the drop-down menu to work.

I also advise you to use javascripts in the footer. for instance

 <script type="text/javascript" src='/js/jquery-1.9.1.min.js'></script> <script type="text/javascript" src='/js/bootstrap.min.js'></script> <script type="text/javascript" src='/js/jquery.cookie.js'></script>
-1
source

More articles:


All Articles