Bootstrap - dropdown menu not working?

Question

My dropdown menu in Bootstrap doesnt appear to be working - can anyone alert me to the problem? Right now it displays the dropdown, but clicking it does nothing. Thanks!

JS:

$(document).ready( function() {
$('.dropdown-toggle').dropdown();
});

HTML:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container" style="width: auto;">

            <a class="brand" style="text-indent: 3em" href="#">
                Title
            </a>

            <ul class="nav">
                <li><a href="#">Profile</a></li>
                <li class="active"><a href="#">Statistics</a></li>
                <li><a href="#">Reader</a></li>

                <li class="dropdown" id="menu1">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
                    Options
                    <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>

            </ul>


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

Answer 1

On bootstrap 4.5.0 it stopped working for a few days in Dec. 2023 and it is now back normal

Answer 2

I've scratched my head for the last few hours and only figured it is due to difference between bs4 and bs5, namely you should replace data-toggle="dropdown" in bs4 with data-bs-toggle="dropdown" in bs5 and vice versa, hope that helps

Answer 3

Double importing jquery can cause Error

<script src="static/public/js/jquery/jquery.min.js"></script>

OR

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="" crossorigin="anonymous"></script>

Answer 4

When i checked i saw display: none; value is in the .dropdown-menu bootstrap css class. Hence i removed it.

Answer 5

If I am getting you correctly, when you say that clicking does nothing, do you mean that it does not point to your URL?

In the anchor tag <a href>it looks like you did not pass your file path to the href attribute. So, replace the # with your actual path for the file that you want to link.

<li><a href="#">Action</a></li>
<li><a href="action link here">Another action</a></li>
<li><a href="something else link here">Something else here</a></li>
<li class="divider"></li>
<li><a href="seperated link here">Separated link</a></li>

I hope this helps with your issue.

Answer 6

If you are using electron or other chromium frame, you have to include jquery within window explicitly by:

<script language="javascript" type="text/javascript" src="local_path/jquery.js" onload="window.$ = window.jQuery = module.exports;"></script>

Answer 7

put following code in your page

  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
    function EndRequest(sender, args) {
        if (args.get_error() == undefined) {
        $('.dropdown-toggle').dropdown();
        }
    }

Answer 8

putting

<script src="js/bootstrap.min.js"></script>    

file at the last after the

<script src="jq/jquery-2.1.1.min.js"></script>  solved this problem for me .

this is how i use write it now and no problem

<script src="jq/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 9

Check if you're referencing jquery.js BEFORE bootstrap.js and bootstrap.js is loaded only once. That fixed the same error for me:

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

Answer 10

I had a similar problem. The version of bootstrap.js that visual studio seems to be hosed. I just pointed to this URL instead:

    <link id="active_style" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/cosmo/bootstrap.min.css">

For completeness, here's the HTML and javascript

<ul class="nav navbar-nav navbar-right">
                    <li id="theme_selector" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a>
                        <ul id="theme" class="dropdown-menu" role="menu">
                            <li><a href="#">Amelia</a></li>
                            <li><a href="#">Cerulean</a></li>
                            <li><a href="#">Cyborg</a></li>
                            <li><a href="#">Cosmo</a></li>
                            <li><a href="#">Darkly</a></li>
                            <li><a href="#">Flatly</a></li>
                            <li><a href="#">Lumen</a></li>
                            <li><a href="#">Simplex</a></li>
                            <li><a href="#">Slate</a></li>
                            <li><a href="#">Spacelab</a></li>
                            <li><a href="#">Superhero</a></li>
                            <li><a href="#">United</a></li>
                            <li><a href="#">Yeti</a></li>
                        </ul>
                    </li>
                </ul>

Javascript

$('#theme li').click(function () {
        //alert('item: ' + $(this).text());
        switch_style($(this).text());
    });

Hope it helps someone

Answer 11

This is a Rails specific answer, but I had this same problem with Bootstrap dropdown menus in my Rails app. What fixed it was adding this to app/assets/javascripts/application.js:

//= require bootstrap

Hope that helps someone.

Answer 12

I had to download the source files instead of just the compressed files that it says to use for quick start on the bootstrap website

Answer 13

you are missing the "btn btn-navbar" section. For example:

        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>

Take a look to navbar documentation in:

Twitter Bootstrap