How to iterate each sub menu item of a menu by pressing tab key through jquery?

Question

here is the code:

    <ul class="main-nav">
                        <li class="item-1">
                            <a href="#" class="menu">Engines</a>
                            <div class="arrow-down"></div>
                            <ul class="full-sub sub-menu">
                                <li class="col-1">
                                   <ul class="sub-menu">
                                       <li class="sub-head"><a href="#">New</a></li>
                                      <li class="sub-head"><a href="#">Personalized Train and Book</a></li>
                                      <li class="sub-head"><a href="#">Diesel</a></li>
                                      <li class="sub-head"><a href="#">Steamies</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                   </ul>
                                </li>
                                <li class="col-2">
                                   <ul class="sub-menu">
                                       <li class="sub-head"><a href="#">Train Engines</a></li>
                                      <li><a href="#" id="abdur">Sub Category Name1</a></li>
                                      <li><a href="#">Sub Category Name2</a></li>
                                      <li><a href="#">Sub Category Name3</a></li>
                                      <li><a href="#">Sub Category Name4</a></li>
                                      <li><a href="#">Sub Category Name5</a></li>
                                      <li><a href="#">Sub Category Name6</a></li>
                                      <li class="sub-head"><a href="#">Rail Cars</a></li> 
                                   </ul>
                                </li>
                                <li class="col-3">
                                   <ul class="sub-menu">
                                       <li class="sub-head"><a href="#">Other Vehicles</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li><a href="#">Sub Category Name</a></li>
                                      <li class="sub-head"><a href="#">Sir Topham Hatt</a></li>
                                   </ul>
                                </li>
                                <li class="col-4">
                                   <ul class="sub-menu">
                                       <li class="sub-head"><a href="#">Basic Engines</a></li>
                                      <li class="sub-head"><a href="#">Talkin Engines</a></li>
                                      <li class="sub-head"><a href="#">Roll and White Engines</a></li>
                                      <li class="sub-head"><a href="#">Battery Operated</a></li>
                                      <li class="sub-head"><a href="#">Multi-Packs</a></li>
                                   </ul>
                                </li>
                             </ul>
                        </li>
</ul>

i want to focus each item of the sub menu by pressing tab. in the chrome it is focused by deafult bt it is not working in firefox and Ie. I have written following code. Please provide me some solution.

$('.main-nav > li').bind('focusin', openSubMenu);
    $('.main-nav > li').bind('focusout', closeSubMenu);

    function openSubMenu() {
        $(this).find('.arrow-down').css('display', 'block').addClass("display-check");
        $(this).find('ul.full-sub').css('display', 'block').addClass("display-check");
    }
    ;

    function closeSubMenu() {
        $(this).find('.arrow-down').css('display', 'none');
        $(this).find('ul.full-sub').css('display', 'none');
    }
    function closeSubMenu() {
            if($('.arrow-down').hasClass('display-check'))
                {
                $('.arrow-down').css('display', 'none');
                $('ul.full-sub').css('display', 'none');
                }
    }

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

You shouldn't need to resort to jQuery, simply define the tabindex attribute of the elements in the underlying HTML.

tabindex="1"

More on this can be found here, and here on MDN (more info here on exactly what you're trying to accomplish):

The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.

MDN also has an article on focus management

edited May 23 '17 at 12:11

Community

1
1

answered May 07 '14 at 08:12

SW4

69,876
20
132
137

where to add tabindex attribute? – bappa147 May 07 '14 at 08:20
Directly into your html on elements you want to add focus to. eg `
` – SW4 May 07 '14 at 08:21

How to iterate each sub menu item of a menu by pressing tab key through jquery?

1 Answers1