[Django]-Twitter Bootstrap 2 drop down menu is not work

9👍

The problem was in missing js block in html file, required for a specific feature.

The missing code bit was:

$('.dropdown-toggle').dropdown()
👤mxpv

4👍

You’re not properly binding your main nav link to your dropdown, try this:

<ul class="nav">
    <li class="dropdown" id="fat-menu"> /* notice the reference to your dropdown link #fat-menu */
        <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
            Аккаунт
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a>SubLink</a></li>
            <li class="divider"></li>
            <li><a>SubLink</a></li>
        </ul>
    </li>
</ul>

Demo: http://jsfiddle.net/u5vhS/1/

2👍

I usually used to forget of one of these:

  • proper html
  • linking to jquery.js and bootstrap-dropdown.js
  • checking if i linked it properly (it seems redundant but it certainly helped me)
  • calling the dropdown: $(‘.dropdown-toggle’).dropdown()

1👍

I know this may seem silly, but when you view the source (via right-click), are the addresses of the JavaScript files correct? It’s possible that {{ STATIC_URL }} isn’t correct. Try copy and pasting the addresses from the source into the address bar. Make sure you actually see the content of the JavaScript files.

👤Keith

1👍

I was facing the same problem. Commenting the link for bootstrap-dropdown.js resolved it. I only needed bootstrap.min.js

0👍

That will happen if you override li somewhere in your css. For example, if you have an other stylesheet with content:

li {
    list-style: none;
    margin-bottom: 20px;
    overflow: hidden;
    padding-bottom: 25px;
    position: relative;
}

It will not work. Make sure there is no conflict.

-1👍

Try to upgrade your jQuery library, it solved the same problem for me.

👤devBen

-3👍

Had the same issue on a .net project (drop down menu not showing at all), however offcial bootstrap samples worked fine. Upgrading jQuery library on my project from 1.6.1 to 1.8.2 solved the problem.

Leave a comment