Twitter Bootstrap 2: Navbar submenu links do not work

Question

After updating to Twitter Bootstrap 2.0 (which is awesome), the navigation links inside submenus do not work.

jQuery is at 1.7.1. The Dropdowns actually work, and the markup is correct (according to the docs):

<!-- start navbar -->
<div class="navbar navbar-fixed-top" id="navbar">

    <!-- start navbar-inner -->
    <div class="navbar-inner">

        <!-- start container-fluid -->
        <div class="container-fluid">

            <?php echo anchor('home', 'SCAA', array('class' => 'brand')); ?>

            <ul class="nav">

                <li class="dropdown" data-toggle="dropdown">
                    <?php echo anchor('#', 'Inscripciones <span class="caret"></span>', array('class' => 'dropdown-toggle', 'data-toggle' => 'dropdown')); ?>

                        <ul class="dropdown-menu">
                            <li><?php echo anchor('inscriptions/add', 'Nueva Inscripción'); ?></li>
                            <li class="divider"></li>
                            <li><?php echo anchor('inscriptions', 'Mostrar Todas'); ?></li>
                        </ul>

                </li>
            </ul>
            <!-- end nav -->

        </div>
        <!-- end container-fluid -->

    </div>
    <!-- end navbar-inner -->

</div>
<!-- end navbar -->

Note: I'm using Codeigniter to generate the links, but with plain tags isn't working either.

The plugins are being loaded correctly.

I'm calling the dropdowns with jQuery('.dropdown-toggle').dropdown();

I don't know what else to do or check. Any hints?

Have you downloaded and loaded bootstrap.js? Normally, I don't think that you have to explicitly call jQuery('.dropdown-toggle').dropdown(). Simply placing the data-toggle="dropdown" (as you already have) should be sufficient — periklis, Feb 09 '12 at 20:39
The JavaScript wasn't the problem. With further analysis, I noticed that `data-toggle="dropdown"` was messing around with the links, __because it was being declared in the
in this case, since you found it, you can answer your own question and mark it as completed — periklis, Feb 11 '12 at 17:18

score 7 · Accepted Answer · answered Feb 12 '12 at 17:34

The markup is not correct (at least, not entirely) - the problem was the declaration of data-toggle="dropdown" inside the containing <li> element. It should be in the 1st child of that list element.

To make it work, simple delete the data-toggle="dropdown" attribute from the list element and it'll be done.

Twitter Bootstrap 2: Navbar submenu links do not work

1 Answers1

Linked