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?

Answer 1

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.