Bootstrap açılır menüsünde menüyü etkinleştirme

Question

Tab tuşunu kullanarak açılır menüden klavyeyi kullanarak gezinmek mümkün mü ve ok tuşlarını kullanarak açmanın alt öğelerine gitmek mümkün mü?

<input type="text" value="click tab to jump to the drop down."/> 
<div class="bs-docs-example"> 
    <div class="dropdown clearfix"> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> 
     <li><a tabindex="-1" href="#">Menu Item A</a></li> 
     <li><a tabindex="-1" href="#">Menu Item B</a></li> 
     <li><a tabindex="-1" href="#">Menu Item C</a></li> 
     <li class="divider"></li> 
     <li><a tabindex="-1" href="#">Menu Item A1</a></li> 
      <li class="dropdown-submenu"> 
       <a tabindex="-1" href="#">Menu Item B1</a> 
       <ul class="dropdown-menu"> 
        <li><a tabindex="-1" href="#">You should navigate here with the keyboard.</a></li> 
        <li><a tabindex="-1" href="#">Thanks For your Help!</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

http://jsfiddle.net/MGwVM/1/

Answer 1

Güncelleme

Bootstrap şimdi standart olarak anahtarlarını yukarı/aşağı destekler: Burada

Şimdi sahip koddur.

Yani sadece get the key code (9) ve aşağıdakileri yapın açılan etkinleştirmek için Tab istiyorsanız:

$('.input-group input').keydown(function(e){ 
    if(e.which == 9){ // tab 
     e.preventDefault(); 
     $(this).parent().find('.dropdown-toggle').click(); 
     $(this).parent().find('.dropdown-menu a:first').focus(); 
    } 
}); 

Ve kullanıcı açılan odaklanmıştır zaman için daha fazla işlevsellik eklemek istiyorsanız menü öğesi:

$('.dropdown-menu a').keydown(function(e){ 
    switch(e.which){ 
     case 36: // home 
      e.preventDefault(); 
      $(this).closest('.dropdown-menu').find('a:first').focus(); 
      break; 
     case 35: // end 
      e.preventDefault(); 
      $(this).closest('.dropdown-menu').find('a:last').focus(); 
      break; 
    } 
}); 

bir demo için this JSFiddle bakınız.

Answer 2

Güzel örnek.

Ancak, neden bir setTimeout ayarladınız? Bazı özel sebepler?

Aynı örnekte, zaman aşımı olmadan bir giriş seçim kutusunu simüle ettim. Check this out.