Twitter Bootstrap 2 drop down menu is not work

StackOverflow https://stackoverflow.com/questions/9334205

  •  27-10-2019
  •  | 
  •  

Question

Good day! I'm trying to implement drop down menu from examples on my site. But it is not work (drop down menu is not showing at all). I included all necessary js and css files, markup is the same as in the docs.

Can you see what I'm doing wrong?

<link type="text/css" href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">

<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-dropdown.js"></script>

...

<body>
<div class="navbar .navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">
                Brand
            </a>

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

...


        </div>
    </div>
</div>

Many thanks.

Was it helpful?

Solution

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

The missing code bit was:

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

OTHER TIPS

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/

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()

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.

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

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.

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top