The bootstrap "dropdown open" toggle does not work properly in development, but works in production

Question

I am following the RailsTutorial sample_app and inside we use the twitter-boostrap framework. There is a dropdown menu (the code, jQuery) that does not work for me properly in the development env, but works well in production (on Heroku).

With the help of "Visual Event" I confirmed that there is an event associated with the menu title. The normal behavior should be on click to change the class from:

<li id="fat-menu" class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">

to:

<li id="fat-menu" class="dropdown open">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">

Still, in my case, on click it adds "open" and removes in the same moment. I could just barely noticed that it makes the change, but quickly return to the initial state and thus, the dropdown menu does not open.

If I manually edit the code in the browser and add "open" to the class, the menu opens. If I then click on the menu title, it removes "open" for a moment and then it returns it again (just opposite from the first case).

I am very puzzled that it works in production, but not in development (on the same browser). What should I check?

Thanks!

Vasil //with the first question

Answer 1

You would get this behavior if you are loading the code for bootstrap-dropdown.js twice. Check to make sure you are not loading both bootstrap-dropdown.js AND bootstrap.js. The latter includes the former.

---

JSFiddle FAIL

If you remove the bootstrap-dropdown.js from the resources panel, and rerun it, it will work.