Question

I have a Twitter Bootstrap dropdown menu on a nav-bar which opens correctly when I click on it and the cursor up/down keys work correctly.

However if I open the same menu using:
$('#menu').dropdown('toggle'); in a keydown or keyup event handler, the menu opens/closing correctly however the cursor up/down keys don’t work. In fact the dropdown menu keydown event doesn’t trigger.

Here is the html and Javascript:

<ul class="nav">   <!-- "KB Menu"   -->
    <li class="dropdown kb_menu hideit">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Knowledge Bases<b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" id="kb_menu">
      </ul>
    </li>
</ul>


$(document).on('keydown', function( event ){
    if ( event.ctrlKey ){
        if ( event.keyCode == 191 ){   // Ctrl+/ = 191
            $('#kb_menu').dropdown('toggle');
        }
    }
});

I have tried everything I can think off to no avail so far.

Answer 1

Add the following line after $('#kb_menu').dropdown('toggle'):

$('#kb_menu').find('li:first > a').focus();