0

My site works with a Bootstrap Dropdown (including dropdown submenus) and Collapse elements.

In general this works fine. But sometimes when the site is accessed, the elements are not opened in the browser.

When the dropdown or collapse are clicked it loads

  • # in the browser for dropdown
  • #collapseTwo for collapse.

I am not sure why this happens. First I include jquery.js, then I include bootstrap.js. I assume that this problem happens when I click too fast, before the js is done loading.

Does anybody have an idea?

Dan
  • 9,391
  • 5
  • 41
  • 73
dermold
  • 91
  • 2
  • 13

2 Answers2

1

You're probably right about the Javascript not having loaded.

Bootstrap javascript is loaded at the bottom of the page. Pro's and cons of this approach are explained here. In short, the page is visible before Javascript has been loaded. Generally, this is only for a very brief moment.

A simple solution to this as suggested by sunilkjt below is to move the javascript links to your header. 

<head>
    ... title, meta, css etc.
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

That way they will definitely be loaded by the time the user can see the page. If for some reason that is not desired, more complex approaches include disabling page access with a modal until all Javascript has loaded (and other methods).

Community
  • 1
  • 1
fzzylogic
  • 2,183
  • 1
  • 19
  • 25
0

Have you tried removing the href="#" on the Dropdown element?

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
      </ul>
    </li>
Mavmedia
  • 1