बूटस्ट्रैप लटकती-मेनू

Question

में कीबोर्ड नेविगेशन को सक्षम करने से यह टैब का उपयोग कर ड्रॉप डाउन मेनू के लिए कीबोर्ड का उपयोग कर जाएँ, और ड्रॉप डाउन के उप तत्वों के लिए तीर कुंजियों का उपयोग नेविगेट करने के लिए संभव है?

<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

अद्यतन

बूटस्ट्रैप अब मानक के रूप में कुंजी ऊपर/नीचे का समर्थन करता है:

यहाँ कोड मैं अब है।

तो अगर आप लटकती सक्रिय करने के लिए, बस get the key code (9) और निम्न कार्य करें टैब हैं:

$('.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(); 
    } 
}); 

और तुम जब उपयोगकर्ता एक लटकती पर केंद्रित है के लिए आगे कार्यक्षमता जोड़ने के लिए चाहते हैं, तो मेनू आइटम:

$('.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; 
    } 
}); 

एक डेमो के लिए this JSFiddle देखें।

Answer 2

अच्छा उदाहरण।

लेकिन, आपने setTimeout क्यों सेट किया? कुछ विशिष्ट कारण?

setTimeout(function(){ 
    $(".search-option:first").focus(); 
},100); 

मैंने एक ही उदाहरण बनाया, बिना किसी टाइमआउट के इनपुट इनपुट बॉक्स को सिमुलेट किया। Check this out।