Search code examples
htmltwitter-bootstrapdrop-down-menuhref

Links inside Twitter Bootstrap Dropdown menu won't work


I have fetched an admin template based on Twitter Bootstrap. I'm currently designing the dropdown menu. It seems that links inside the menu don't work (its effect is to close the menu). Here is the code:

<ul class="nav navbar-nav navbar-right navbar-user">
    <!-- others links -->
    <?php $auth = Zend_Auth::getInstance(); ?>
    <?php if($auth->hasIdentity()):?>
        <li class="dropdown user-dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <?php echo $auth->getIdentity()->user_name.' '.$auth->getIdentity()->user_lastname;?><b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="http://www.google.com/"><i class="fa fa-user"></i> Profil</a></li>
                <li><a href="http://www.google.com/"><i class="fa fa-envelope"></i> Messages <span class="badge">7</span></a></li>
                <li><a href="abo/public/"><i class="fa fa-gear"></i> Paramètres</a></li>
                <li class="divider"></li>
                <li><a href="<?php echo $this->url(array(), 'logout');?>"><i class="fa fa-power-off"></i> Déconnexion</a></li>
            </ul>
        </li>
    <?php else: ?>
        <li class="dropdown user-dropdown"><a href="#"><i class="fa fa-user"></i> Veuillez vous connecter</a></li>
    <?php endif;?>
</ul>

What is wrong with this code?


Solution

  • A quick search over the internet showed me that this a bug from Bootstrap. Here is my workaround :

    $('li.dropdown ul').find('a').on('click', function() {
        window.location = $(this).attr('href');
    });