Move focus to Next “li” element neglecting all nested elements The Next CEO of Stack OverflowSend focus to dynamic li with jQueryHow do I find out which DOM element has the focus?How to move an element into another element?Remove all child elements of a DOM node in JavaScriptAdding setTimeout UL menu using JavaScriptWant nav menu over background image on splash page but it moves around on various monitorsVertical Sub List in Horizontal List Giving Alignment ProblemsPadding make item move after adding border on JS clickColored background on hoverHow to persist the anchor status (focus) of a navigation menu item after LightBox gallery is closedNavbar active element changes color on hover when it shouldn't?

Unreliable Magic - Is it worth it?

Is there an analogue of projective spaces for proper schemes?

Example of a Mathematician/Physicist whose Other Publications during their PhD eclipsed their PhD Thesis

Are there any unintended negative consequences to allowing PCs to gain multiple levels at once in a short milestone-XP game?

Why do airplanes bank sharply to the right after air-to-air refueling?

Would a completely good Muggle be able to use a wand?

Would a galaxy be visible from outside, but nearby?

Parametric curve length - calculus

How do I transpose the 1st and -1th levels of an arbitrarily nested array?

Do I need to enable Dev Hub in my PROD Org?

What's the best way to handle refactoring a big file?

Why do we use the plural of movies in this phrase "We went to the movies last night."?

Indicator light circuit

How to avoid supervisors with prejudiced views?

Should I tutor a student who I know has cheated on their homework?

In excess I'm lethal

Help understanding this unsettling image of Titan, Epimetheus, and Saturn's rings?

Is there a way to save my career from absolute disaster?

What benefits would be gained by using human laborers instead of drones in deep sea mining?

Complex fractions

Anatomically Correct Strange Women In Ponds Distributing Swords

What is the result of assigning to std::vector<T>::begin()?

What flight has the highest ratio of time difference to flight time?

Why does the UK parliament need a vote on the political declaration?



Move focus to Next “li” element neglecting all nested elements



The Next CEO of Stack OverflowSend focus to dynamic li with jQueryHow do I find out which DOM element has the focus?How to move an element into another element?Remove all child elements of a DOM node in JavaScriptAdding setTimeout UL menu using JavaScriptWant nav menu over background image on splash page but it moves around on various monitorsVertical Sub List in Horizontal List Giving Alignment ProblemsPadding make item move after adding border on JS clickColored background on hoverHow to persist the anchor status (focus) of a navigation menu item after LightBox gallery is closedNavbar active element changes color on hover when it shouldn't?










0















I have Menu having structure as below.






$('html').removeClass('no-js');
// Add plus mark to li that have a sub menu
$('li:has("ul") > a').append('<span class="plusMark">+</span>');

Mousetrap.bind('down', function(e) 

 if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
 //mentioned below What I have tried till now
 

);

#nav,
#nav ul,
#nav li 
 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 box-sizing: border-box;


#nav 
 position: relative;
 min-height: 30px;
 max-width: 100%;
 background-color: #b5b5b5;
 color: #000;


#nav li 
 position: relative;


#nav a 
 text-decoration: none;
 height: 100%;
 display: block;
 padding: 0 20px;


#nav>ul,
.fa 
 height: 30px;
 line-height: 30px;


#nav>ul>li 
 position: relative;
 text-align: center;


#nav>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>a:hover,
#nav>ul>li>a:focus,
#nav>ul>li>a.js-openSubMenu 
 background-color: #5f5f5f;


#nav>ul>li:hover>a,
#nav>ul>li:focus>a 
 background-color: #5f5f5f;
 color: #fff;


#nav>ul>li>ul>li>a 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>a:focus 
 background-color: #b5b5b5;


#nav>ul>li>ul>li:not(:last-child) a 
 border-bottom: 1px solid #b5b5b5;


#nav>ul>li>ul>li>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>ul>li>a:focus 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>ul>li:not(:last-child)>a 
 border-bottom: 1px solid #5f5f5f;



/* Javascript classes */

#nav .js-hideElement 
 display: none;


#nav .js-showElement 
 display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containe-header">
 <nav id="nav">
 <ul>
 <li class="menu-t"><a href="#">Main</a>
 <ul>
 <li><a href="#">Item1</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 </ul>
 </li>
 <li><a href="#">Item2</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 <li><a href="#">Sub Item 5</a></li>
 <li><a href="#">Sub Item 6</a></li>
 </ul>
 </li>
 <li><a href="#">Item3</a></li>
 <li><a href="#">Item4</a></li>
 </ul>
 </li>
 <li class="menu-l"><a href="#">Menu2</a></li>
 </ul>
 </nav>
</div>





The question is to move focus from Item1 to Item2 and to Item3 so on...by pressing down arrow key (I have used Mousetrap library for detecting keypress)



What I have tried so far..



1.



var focused_index = 1;
focused_index=focused_index - 1;
$('a').eq(focused_index).focus();


But this method focuses on nested elements means from item1 to Sub Item 1 and then to Sub Item 2 and so on..



2.



// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;


but this causes problem with other elements having focus inside Body tag.



  1. Answer from this question Send focus to dynamic li with jQuery

So how I can I move focus from Item1 to Item2.






javascript jquery html css







share|improve this question



















  • 1





    Given your html structure: $('a').eq(focused_index).closest("li").next().find("a").first().focus();

    – freedomn-m
    Mar 7 at 15:24











  • FYI, bind is old syntax and has been deprecated. Look at on.

    – isherwood
    Mar 7 at 15:29











  • @freedomn-m I had tried that code but it is moving focus to Menu2. Not to next "li" element. Please help me solve this issue and thanks for your suggestion.

    – CreatorsCorp
    Mar 7 at 15:31






  • 1





    @isherwood I agree, but you'll see this happens a lot on SO (perhaps not on the other overflow sites) as people like me want to provide help but don't have time for a fully fleshed answer. Brief answers attract downvotes. The counter-argument is of course "don't answer if you don't have time".

    – freedomn-m
    Mar 7 at 15:35











  • You asked: "So how I can I move focus from Item1 to Item2." - as there's no "menu" it looks like "item2"/"menu2" are the same - your current focus is on "item1" (the <a>) so it goes that you would want to focus on "item2" (the next <a>) - you also can't focus on li elements. Maybe you can explain exactly what you're expecting to happen?

    – freedomn-m
    Mar 7 at 15:39















0















I have Menu having structure as below.






$('html').removeClass('no-js');
// Add plus mark to li that have a sub menu
$('li:has("ul") > a').append('<span class="plusMark">+</span>');

Mousetrap.bind('down', function(e) 

 if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
 //mentioned below What I have tried till now
 

);

#nav,
#nav ul,
#nav li 
 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 box-sizing: border-box;


#nav 
 position: relative;
 min-height: 30px;
 max-width: 100%;
 background-color: #b5b5b5;
 color: #000;


#nav li 
 position: relative;


#nav a 
 text-decoration: none;
 height: 100%;
 display: block;
 padding: 0 20px;


#nav>ul,
.fa 
 height: 30px;
 line-height: 30px;


#nav>ul>li 
 position: relative;
 text-align: center;


#nav>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>a:hover,
#nav>ul>li>a:focus,
#nav>ul>li>a.js-openSubMenu 
 background-color: #5f5f5f;


#nav>ul>li:hover>a,
#nav>ul>li:focus>a 
 background-color: #5f5f5f;
 color: #fff;


#nav>ul>li>ul>li>a 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>a:focus 
 background-color: #b5b5b5;


#nav>ul>li>ul>li:not(:last-child) a 
 border-bottom: 1px solid #b5b5b5;


#nav>ul>li>ul>li>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>ul>li>a:focus 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>ul>li:not(:last-child)>a 
 border-bottom: 1px solid #5f5f5f;



/* Javascript classes */

#nav .js-hideElement 
 display: none;


#nav .js-showElement 
 display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containe-header">
 <nav id="nav">
 <ul>
 <li class="menu-t"><a href="#">Main</a>
 <ul>
 <li><a href="#">Item1</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 </ul>
 </li>
 <li><a href="#">Item2</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 <li><a href="#">Sub Item 5</a></li>
 <li><a href="#">Sub Item 6</a></li>
 </ul>
 </li>
 <li><a href="#">Item3</a></li>
 <li><a href="#">Item4</a></li>
 </ul>
 </li>
 <li class="menu-l"><a href="#">Menu2</a></li>
 </ul>
 </nav>
</div>





The question is to move focus from Item1 to Item2 and to Item3 so on...by pressing down arrow key (I have used Mousetrap library for detecting keypress)



What I have tried so far..



1.



var focused_index = 1;
focused_index=focused_index - 1;
$('a').eq(focused_index).focus();


But this method focuses on nested elements means from item1 to Sub Item 1 and then to Sub Item 2 and so on..



2.



// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;


but this causes problem with other elements having focus inside Body tag.



  1. Answer from this question Send focus to dynamic li with jQuery

So how I can I move focus from Item1 to Item2.






javascript jquery html css







share|improve this question



















  • 1





    Given your html structure: $('a').eq(focused_index).closest("li").next().find("a").first().focus();

    – freedomn-m
    Mar 7 at 15:24











  • FYI, bind is old syntax and has been deprecated. Look at on.

    – isherwood
    Mar 7 at 15:29











  • @freedomn-m I had tried that code but it is moving focus to Menu2. Not to next "li" element. Please help me solve this issue and thanks for your suggestion.

    – CreatorsCorp
    Mar 7 at 15:31






  • 1





    @isherwood I agree, but you'll see this happens a lot on SO (perhaps not on the other overflow sites) as people like me want to provide help but don't have time for a fully fleshed answer. Brief answers attract downvotes. The counter-argument is of course "don't answer if you don't have time".

    – freedomn-m
    Mar 7 at 15:35











  • You asked: "So how I can I move focus from Item1 to Item2." - as there's no "menu" it looks like "item2"/"menu2" are the same - your current focus is on "item1" (the <a>) so it goes that you would want to focus on "item2" (the next <a>) - you also can't focus on li elements. Maybe you can explain exactly what you're expecting to happen?

    – freedomn-m
    Mar 7 at 15:39













0












0








0








I have Menu having structure as below.






$('html').removeClass('no-js');
// Add plus mark to li that have a sub menu
$('li:has("ul") > a').append('<span class="plusMark">+</span>');

Mousetrap.bind('down', function(e) 

 if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
 //mentioned below What I have tried till now
 

);

#nav,
#nav ul,
#nav li 
 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 box-sizing: border-box;


#nav 
 position: relative;
 min-height: 30px;
 max-width: 100%;
 background-color: #b5b5b5;
 color: #000;


#nav li 
 position: relative;


#nav a 
 text-decoration: none;
 height: 100%;
 display: block;
 padding: 0 20px;


#nav>ul,
.fa 
 height: 30px;
 line-height: 30px;


#nav>ul>li 
 position: relative;
 text-align: center;


#nav>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>a:hover,
#nav>ul>li>a:focus,
#nav>ul>li>a.js-openSubMenu 
 background-color: #5f5f5f;


#nav>ul>li:hover>a,
#nav>ul>li:focus>a 
 background-color: #5f5f5f;
 color: #fff;


#nav>ul>li>ul>li>a 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>a:focus 
 background-color: #b5b5b5;


#nav>ul>li>ul>li:not(:last-child) a 
 border-bottom: 1px solid #b5b5b5;


#nav>ul>li>ul>li>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>ul>li>a:focus 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>ul>li:not(:last-child)>a 
 border-bottom: 1px solid #5f5f5f;



/* Javascript classes */

#nav .js-hideElement 
 display: none;


#nav .js-showElement 
 display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containe-header">
 <nav id="nav">
 <ul>
 <li class="menu-t"><a href="#">Main</a>
 <ul>
 <li><a href="#">Item1</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 </ul>
 </li>
 <li><a href="#">Item2</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 <li><a href="#">Sub Item 5</a></li>
 <li><a href="#">Sub Item 6</a></li>
 </ul>
 </li>
 <li><a href="#">Item3</a></li>
 <li><a href="#">Item4</a></li>
 </ul>
 </li>
 <li class="menu-l"><a href="#">Menu2</a></li>
 </ul>
 </nav>
</div>





The question is to move focus from Item1 to Item2 and to Item3 so on...by pressing down arrow key (I have used Mousetrap library for detecting keypress)



What I have tried so far..



1.



var focused_index = 1;
focused_index=focused_index - 1;
$('a').eq(focused_index).focus();


But this method focuses on nested elements means from item1 to Sub Item 1 and then to Sub Item 2 and so on..



2.



// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;


but this causes problem with other elements having focus inside Body tag.



  1. Answer from this question Send focus to dynamic li with jQuery

So how I can I move focus from Item1 to Item2.






javascript jquery html css







share|improve this question
















I have Menu having structure as below.






$('html').removeClass('no-js');
// Add plus mark to li that have a sub menu
$('li:has("ul") > a').append('<span class="plusMark">+</span>');

Mousetrap.bind('down', function(e) 

 if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
 //mentioned below What I have tried till now
 

);

#nav,
#nav ul,
#nav li 
 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 box-sizing: border-box;


#nav 
 position: relative;
 min-height: 30px;
 max-width: 100%;
 background-color: #b5b5b5;
 color: #000;


#nav li 
 position: relative;


#nav a 
 text-decoration: none;
 height: 100%;
 display: block;
 padding: 0 20px;


#nav>ul,
.fa 
 height: 30px;
 line-height: 30px;


#nav>ul>li 
 position: relative;
 text-align: center;


#nav>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>a:hover,
#nav>ul>li>a:focus,
#nav>ul>li>a.js-openSubMenu 
 background-color: #5f5f5f;


#nav>ul>li:hover>a,
#nav>ul>li:focus>a 
 background-color: #5f5f5f;
 color: #fff;


#nav>ul>li>ul>li>a 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>a:focus 
 background-color: #b5b5b5;


#nav>ul>li>ul>li:not(:last-child) a 
 border-bottom: 1px solid #b5b5b5;


#nav>ul>li>ul>li>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>ul>li>a:focus 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>ul>li:not(:last-child)>a 
 border-bottom: 1px solid #5f5f5f;



/* Javascript classes */

#nav .js-hideElement 
 display: none;


#nav .js-showElement 
 display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containe-header">
 <nav id="nav">
 <ul>
 <li class="menu-t"><a href="#">Main</a>
 <ul>
 <li><a href="#">Item1</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 </ul>
 </li>
 <li><a href="#">Item2</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 <li><a href="#">Sub Item 5</a></li>
 <li><a href="#">Sub Item 6</a></li>
 </ul>
 </li>
 <li><a href="#">Item3</a></li>
 <li><a href="#">Item4</a></li>
 </ul>
 </li>
 <li class="menu-l"><a href="#">Menu2</a></li>
 </ul>
 </nav>
</div>





The question is to move focus from Item1 to Item2 and to Item3 so on...by pressing down arrow key (I have used Mousetrap library for detecting keypress)



What I have tried so far..



1.



var focused_index = 1;
focused_index=focused_index - 1;
$('a').eq(focused_index).focus();


But this method focuses on nested elements means from item1 to Sub Item 1 and then to Sub Item 2 and so on..



2.



// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;


but this causes problem with other elements having focus inside Body tag.



  1. Answer from this question Send focus to dynamic li with jQuery

So how I can I move focus from Item1 to Item2.






$('html').removeClass('no-js');
// Add plus mark to li that have a sub menu
$('li:has("ul") > a').append('<span class="plusMark">+</span>');

Mousetrap.bind('down', function(e) 

 if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
 //mentioned below What I have tried till now
 

);

#nav,
#nav ul,
#nav li 
 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 box-sizing: border-box;


#nav 
 position: relative;
 min-height: 30px;
 max-width: 100%;
 background-color: #b5b5b5;
 color: #000;


#nav li 
 position: relative;


#nav a 
 text-decoration: none;
 height: 100%;
 display: block;
 padding: 0 20px;


#nav>ul,
.fa 
 height: 30px;
 line-height: 30px;


#nav>ul>li 
 position: relative;
 text-align: center;


#nav>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>a:hover,
#nav>ul>li>a:focus,
#nav>ul>li>a.js-openSubMenu 
 background-color: #5f5f5f;


#nav>ul>li:hover>a,
#nav>ul>li:focus>a 
 background-color: #5f5f5f;
 color: #fff;


#nav>ul>li>ul>li>a 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>a:focus 
 background-color: #b5b5b5;


#nav>ul>li>ul>li:not(:last-child) a 
 border-bottom: 1px solid #b5b5b5;


#nav>ul>li>ul>li>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>ul>li>a:focus 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>ul>li:not(:last-child)>a 
 border-bottom: 1px solid #5f5f5f;



/* Javascript classes */

#nav .js-hideElement 
 display: none;


#nav .js-showElement 
 display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containe-header">
 <nav id="nav">
 <ul>
 <li class="menu-t"><a href="#">Main</a>
 <ul>
 <li><a href="#">Item1</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 </ul>
 </li>
 <li><a href="#">Item2</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 <li><a href="#">Sub Item 5</a></li>
 <li><a href="#">Sub Item 6</a></li>
 </ul>
 </li>
 <li><a href="#">Item3</a></li>
 <li><a href="#">Item4</a></li>
 </ul>
 </li>
 <li class="menu-l"><a href="#">Menu2</a></li>
 </ul>
 </nav>
</div>





$('html').removeClass('no-js');
// Add plus mark to li that have a sub menu
$('li:has("ul") > a').append('<span class="plusMark">+</span>');

Mousetrap.bind('down', function(e) 

 if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
 //mentioned below What I have tried till now
 

);

#nav,
#nav ul,
#nav li 
 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 box-sizing: border-box;


#nav 
 position: relative;
 min-height: 30px;
 max-width: 100%;
 background-color: #b5b5b5;
 color: #000;


#nav li 
 position: relative;


#nav a 
 text-decoration: none;
 height: 100%;
 display: block;
 padding: 0 20px;


#nav>ul,
.fa 
 height: 30px;
 line-height: 30px;


#nav>ul>li 
 position: relative;
 text-align: center;


#nav>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>a:hover,
#nav>ul>li>a:focus,
#nav>ul>li>a.js-openSubMenu 
 background-color: #5f5f5f;


#nav>ul>li:hover>a,
#nav>ul>li:focus>a 
 background-color: #5f5f5f;
 color: #fff;


#nav>ul>li>ul>li>a 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>a:focus 
 background-color: #b5b5b5;


#nav>ul>li>ul>li:not(:last-child) a 
 border-bottom: 1px solid #b5b5b5;


#nav>ul>li>ul>li>ul>li>a 
 background-color: #b5b5b5;


#nav>ul>li>ul>li>ul>li>a:hover,
#nav>ul>li>ul>li>ul>li>a:focus 
 background-color: #5f5f5f;


#nav>ul>li>ul>li>ul>li:not(:last-child)>a 
 border-bottom: 1px solid #5f5f5f;



/* Javascript classes */

#nav .js-hideElement 
 display: none;


#nav .js-showElement 
 display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containe-header">
 <nav id="nav">
 <ul>
 <li class="menu-t"><a href="#">Main</a>
 <ul>
 <li><a href="#">Item1</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 </ul>
 </li>
 <li><a href="#">Item2</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 <li><a href="#">Sub Item 5</a></li>
 <li><a href="#">Sub Item 6</a></li>
 </ul>
 </li>
 <li><a href="#">Item3</a></li>
 <li><a href="#">Item4</a></li>
 </ul>
 </li>
 <li class="menu-l"><a href="#">Menu2</a></li>
 </ul>
 </nav>
</div>





javascript jquery html css




javascript jquery html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 7 at 15:27









Jeremy Thille

14k42339




14k42339










asked Mar 7 at 15:19









CreatorsCorpCreatorsCorp

186




186







  • 1





    Given your html structure: $('a').eq(focused_index).closest("li").next().find("a").first().focus();

    – freedomn-m
    Mar 7 at 15:24











  • FYI, bind is old syntax and has been deprecated. Look at on.

    – isherwood
    Mar 7 at 15:29











  • @freedomn-m I had tried that code but it is moving focus to Menu2. Not to next "li" element. Please help me solve this issue and thanks for your suggestion.

    – CreatorsCorp
    Mar 7 at 15:31






  • 1





    @isherwood I agree, but you'll see this happens a lot on SO (perhaps not on the other overflow sites) as people like me want to provide help but don't have time for a fully fleshed answer. Brief answers attract downvotes. The counter-argument is of course "don't answer if you don't have time".

    – freedomn-m
    Mar 7 at 15:35











  • You asked: "So how I can I move focus from Item1 to Item2." - as there's no "menu" it looks like "item2"/"menu2" are the same - your current focus is on "item1" (the <a>) so it goes that you would want to focus on "item2" (the next <a>) - you also can't focus on li elements. Maybe you can explain exactly what you're expecting to happen?

    – freedomn-m
    Mar 7 at 15:39












  • 1





    Given your html structure: $('a').eq(focused_index).closest("li").next().find("a").first().focus();

    – freedomn-m
    Mar 7 at 15:24











  • FYI, bind is old syntax and has been deprecated. Look at on.

    – isherwood
    Mar 7 at 15:29











  • @freedomn-m I had tried that code but it is moving focus to Menu2. Not to next "li" element. Please help me solve this issue and thanks for your suggestion.

    – CreatorsCorp
    Mar 7 at 15:31






  • 1





    @isherwood I agree, but you'll see this happens a lot on SO (perhaps not on the other overflow sites) as people like me want to provide help but don't have time for a fully fleshed answer. Brief answers attract downvotes. The counter-argument is of course "don't answer if you don't have time".

    – freedomn-m
    Mar 7 at 15:35











  • You asked: "So how I can I move focus from Item1 to Item2." - as there's no "menu" it looks like "item2"/"menu2" are the same - your current focus is on "item1" (the <a>) so it goes that you would want to focus on "item2" (the next <a>) - you also can't focus on li elements. Maybe you can explain exactly what you're expecting to happen?

    – freedomn-m
    Mar 7 at 15:39







1




1





Given your html structure: $('a').eq(focused_index).closest("li").next().find("a").first().focus();

– freedomn-m
Mar 7 at 15:24





Given your html structure: $('a').eq(focused_index).closest("li").next().find("a").first().focus();

– freedomn-m
Mar 7 at 15:24













FYI, bind is old syntax and has been deprecated. Look at on.

– isherwood
Mar 7 at 15:29





FYI, bind is old syntax and has been deprecated. Look at on.

– isherwood
Mar 7 at 15:29













@freedomn-m I had tried that code but it is moving focus to Menu2. Not to next "li" element. Please help me solve this issue and thanks for your suggestion.

– CreatorsCorp
Mar 7 at 15:31





@freedomn-m I had tried that code but it is moving focus to Menu2. Not to next "li" element. Please help me solve this issue and thanks for your suggestion.

– CreatorsCorp
Mar 7 at 15:31




1




1





@isherwood I agree, but you'll see this happens a lot on SO (perhaps not on the other overflow sites) as people like me want to provide help but don't have time for a fully fleshed answer. Brief answers attract downvotes. The counter-argument is of course "don't answer if you don't have time".

– freedomn-m
Mar 7 at 15:35





@isherwood I agree, but you'll see this happens a lot on SO (perhaps not on the other overflow sites) as people like me want to provide help but don't have time for a fully fleshed answer. Brief answers attract downvotes. The counter-argument is of course "don't answer if you don't have time".

– freedomn-m
Mar 7 at 15:35













You asked: "So how I can I move focus from Item1 to Item2." - as there's no "menu" it looks like "item2"/"menu2" are the same - your current focus is on "item1" (the <a>) so it goes that you would want to focus on "item2" (the next <a>) - you also can't focus on li elements. Maybe you can explain exactly what you're expecting to happen?

– freedomn-m
Mar 7 at 15:39





You asked: "So how I can I move focus from Item1 to Item2." - as there's no "menu" it looks like "item2"/"menu2" are the same - your current focus is on "item1" (the <a>) so it goes that you would want to focus on "item2" (the next <a>) - you also can't focus on li elements. Maybe you can explain exactly what you're expecting to happen?

– freedomn-m
Mar 7 at 15:39












2 Answers
2






active

oldest

votes


















1















I want to focus on element of Item2. and then to element of Item3.




You can use:



$("a:focus").closest("li").next().find("a").first().focus();


Working snippet:






// Add plus mark to li that have a sub menu
$('li:has("ul") > a').append('<span class="plusMark">+</span>');

// set initial focus
$("#nav>ul>li.menu-t>ul>li>a:first()").focus();

$(document).on("keydown", function(e) 

 if (e.keyCode == 40) 
 $("a:focus").closest("li").next().find("a").first().focus();
 return false;
 
 if (e.keyCode == 38) 
 $("a:focus").closest("li").prev().find("a").first().focus();
 return false;
 
 
 //if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
 //mentioned below What I have tried till now
 //

);

a text-decoration: none; 
:focus background-color: yellow; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containe-header">
 <nav id="nav">
 <ul>
 <li class="menu-t"><a href="#">Main</a>
 <ul>
 <li><a href="#">Item1</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 </ul>
 </li>
 <li><a href="#">Item2</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 <li><a href="#">Sub Item 5</a></li>
 <li><a href="#">Sub Item 6</a></li>
 </ul>
 </li>
 <li><a href="#">Item3</a></li>
 <li><a href="#">Item4</a></li>
 </ul>
 </li>
 <li class="menu-l"><a href="#">Menu2</a></li>
 </ul>
 </nav>
</div>








share|improve this answer























  • Thank You very much. This works perfect as expected. Thanks Again.

    – CreatorsCorp
    Mar 8 at 11:48


















0














You could use a CSS selector to store the elements you want to "focus" on in an array. Add an event handler for 'keydown' events - if the e.code shows that the user clicked the down arrow then iterate to the next element in the array. I did this by using a generator function that will rotate back to 0 index when we reach the end of the array:






function* nextElGenerator() 
 var liEls = document.querySelectorAll('.menu-t > ul > li > a:first-child');

 var i = 0;

 while (true) 
 yield liEls[i];
 i += 1;

 if (i === liEls.length) 
 i = 0;
 
 


const bulletElItr = nextElGenerator();
let curEl;

document.addEventListener('keydown', e => 
 if (e.code === 'ArrowDown') 
 if (curEl) 
 curEl.style.backgroundColor = 'transparent';
 
 curEl = bulletElItr.next().value;
 curEl.style.backgroundColor = 'yellow';
 
);

<div class="containe-header">
 <nav id="nav">
 <ul>
 <li class="menu-t"><a href="#">Main</a>
 <ul>
 <li><a href="#">Item1</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 </ul>
 </li>
 <li><a href="#">Item2</a>
 <ul>
 <li><a href="#">Sub Item 1</a></li>
 <li><a href="#">Sub Item 2</a></li>
 <li><a href="#">Sub Item 3</a></li>
 <li><a href="#">Sub Item 4</a></li>
 <li><a href="#">Sub Item 5</a></li>
 <li><a href="#">Sub Item 6</a></li>
 </ul>
 </li>
 <li><a href="#">Item3</a></li>
 <li><a href="#">Item4</a></li>
 </ul>
 </li>
 <li class="menu-l"><a href="#">Menu2</a></li>
 </ul>
 </nav>
</div>








share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55047210%2fmove-focus-to-next-li-element-neglecting-all-nested-elements%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1















    I want to focus on element of Item2. and then to element of Item3.




    You can use:



    $("a:focus").closest("li").next().find("a").first().focus();


    Working snippet:






    // Add plus mark to li that have a sub menu
    $('li:has("ul") > a').append('<span class="plusMark">+</span>');

    // set initial focus
    $("#nav>ul>li.menu-t>ul>li>a:first()").focus();

    $(document).on("keydown", function(e) 

     if (e.keyCode == 40) 
     $("a:focus").closest("li").next().find("a").first().focus();
     return false;
     
     if (e.keyCode == 38) 
     $("a:focus").closest("li").prev().find("a").first().focus();
     return false;
     
     
     //if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
     //mentioned below What I have tried till now
     //

    );

    a text-decoration: none; 
    :focus background-color: yellow; 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="containe-header">
     <nav id="nav">
     <ul>
     <li class="menu-t"><a href="#">Main</a>
     <ul>
     <li><a href="#">Item1</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     </ul>
     </li>
     <li><a href="#">Item2</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     <li><a href="#">Sub Item 5</a></li>
     <li><a href="#">Sub Item 6</a></li>
     </ul>
     </li>
     <li><a href="#">Item3</a></li>
     <li><a href="#">Item4</a></li>
     </ul>
     </li>
     <li class="menu-l"><a href="#">Menu2</a></li>
     </ul>
     </nav>
    </div>








    share|improve this answer























    • Thank You very much. This works perfect as expected. Thanks Again.

      – CreatorsCorp
      Mar 8 at 11:48















    1















    I want to focus on element of Item2. and then to element of Item3.




    You can use:



    $("a:focus").closest("li").next().find("a").first().focus();


    Working snippet:






    // Add plus mark to li that have a sub menu
    $('li:has("ul") > a').append('<span class="plusMark">+</span>');

    // set initial focus
    $("#nav>ul>li.menu-t>ul>li>a:first()").focus();

    $(document).on("keydown", function(e) 

     if (e.keyCode == 40) 
     $("a:focus").closest("li").next().find("a").first().focus();
     return false;
     
     if (e.keyCode == 38) 
     $("a:focus").closest("li").prev().find("a").first().focus();
     return false;
     
     
     //if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
     //mentioned below What I have tried till now
     //

    );

    a text-decoration: none; 
    :focus background-color: yellow; 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="containe-header">
     <nav id="nav">
     <ul>
     <li class="menu-t"><a href="#">Main</a>
     <ul>
     <li><a href="#">Item1</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     </ul>
     </li>
     <li><a href="#">Item2</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     <li><a href="#">Sub Item 5</a></li>
     <li><a href="#">Sub Item 6</a></li>
     </ul>
     </li>
     <li><a href="#">Item3</a></li>
     <li><a href="#">Item4</a></li>
     </ul>
     </li>
     <li class="menu-l"><a href="#">Menu2</a></li>
     </ul>
     </nav>
    </div>








    share|improve this answer























    • Thank You very much. This works perfect as expected. Thanks Again.

      – CreatorsCorp
      Mar 8 at 11:48













    1












    1








    1








    I want to focus on element of Item2. and then to element of Item3.




    You can use:



    $("a:focus").closest("li").next().find("a").first().focus();


    Working snippet:






    // Add plus mark to li that have a sub menu
    $('li:has("ul") > a').append('<span class="plusMark">+</span>');

    // set initial focus
    $("#nav>ul>li.menu-t>ul>li>a:first()").focus();

    $(document).on("keydown", function(e) 

     if (e.keyCode == 40) 
     $("a:focus").closest("li").next().find("a").first().focus();
     return false;
     
     if (e.keyCode == 38) 
     $("a:focus").closest("li").prev().find("a").first().focus();
     return false;
     
     
     //if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
     //mentioned below What I have tried till now
     //

    );

    a text-decoration: none; 
    :focus background-color: yellow; 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="containe-header">
     <nav id="nav">
     <ul>
     <li class="menu-t"><a href="#">Main</a>
     <ul>
     <li><a href="#">Item1</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     </ul>
     </li>
     <li><a href="#">Item2</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     <li><a href="#">Sub Item 5</a></li>
     <li><a href="#">Sub Item 6</a></li>
     </ul>
     </li>
     <li><a href="#">Item3</a></li>
     <li><a href="#">Item4</a></li>
     </ul>
     </li>
     <li class="menu-l"><a href="#">Menu2</a></li>
     </ul>
     </nav>
    </div>








    share|improve this answer














    I want to focus on element of Item2. and then to element of Item3.




    You can use:



    $("a:focus").closest("li").next().find("a").first().focus();


    Working snippet:






    // Add plus mark to li that have a sub menu
    $('li:has("ul") > a').append('<span class="plusMark">+</span>');

    // set initial focus
    $("#nav>ul>li.menu-t>ul>li>a:first()").focus();

    $(document).on("keydown", function(e) 

     if (e.keyCode == 40) 
     $("a:focus").closest("li").next().find("a").first().focus();
     return false;
     
     if (e.keyCode == 38) 
     $("a:focus").closest("li").prev().find("a").first().focus();
     return false;
     
     
     //if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
     //mentioned below What I have tried till now
     //

    );

    a text-decoration: none; 
    :focus background-color: yellow; 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="containe-header">
     <nav id="nav">
     <ul>
     <li class="menu-t"><a href="#">Main</a>
     <ul>
     <li><a href="#">Item1</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     </ul>
     </li>
     <li><a href="#">Item2</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     <li><a href="#">Sub Item 5</a></li>
     <li><a href="#">Sub Item 6</a></li>
     </ul>
     </li>
     <li><a href="#">Item3</a></li>
     <li><a href="#">Item4</a></li>
     </ul>
     </li>
     <li class="menu-l"><a href="#">Menu2</a></li>
     </ul>
     </nav>
    </div>








    // Add plus mark to li that have a sub menu
    $('li:has("ul") > a').append('<span class="plusMark">+</span>');

    // set initial focus
    $("#nav>ul>li.menu-t>ul>li>a:first()").focus();

    $(document).on("keydown", function(e) 

     if (e.keyCode == 40) 
     $("a:focus").closest("li").next().find("a").first().focus();
     return false;
     
     if (e.keyCode == 38) 
     $("a:focus").closest("li").prev().find("a").first().focus();
     return false;
     
     
     //if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
     //mentioned below What I have tried till now
     //

    );

    a text-decoration: none; 
    :focus background-color: yellow; 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="containe-header">
     <nav id="nav">
     <ul>
     <li class="menu-t"><a href="#">Main</a>
     <ul>
     <li><a href="#">Item1</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     </ul>
     </li>
     <li><a href="#">Item2</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     <li><a href="#">Sub Item 5</a></li>
     <li><a href="#">Sub Item 6</a></li>
     </ul>
     </li>
     <li><a href="#">Item3</a></li>
     <li><a href="#">Item4</a></li>
     </ul>
     </li>
     <li class="menu-l"><a href="#">Menu2</a></li>
     </ul>
     </nav>
    </div>





    // Add plus mark to li that have a sub menu
    $('li:has("ul") > a').append('<span class="plusMark">+</span>');

    // set initial focus
    $("#nav>ul>li.menu-t>ul>li>a:first()").focus();

    $(document).on("keydown", function(e) 

     if (e.keyCode == 40) 
     $("a:focus").closest("li").next().find("a").first().focus();
     return false;
     
     if (e.keyCode == 38) 
     $("a:focus").closest("li").prev().find("a").first().focus();
     return false;
     
     
     //if ($(".manu-t").children("ul").children("li").children(":focus").length != 0) 
     //mentioned below What I have tried till now
     //

    );

    a text-decoration: none; 
    :focus background-color: yellow; 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="containe-header">
     <nav id="nav">
     <ul>
     <li class="menu-t"><a href="#">Main</a>
     <ul>
     <li><a href="#">Item1</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     </ul>
     </li>
     <li><a href="#">Item2</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     <li><a href="#">Sub Item 5</a></li>
     <li><a href="#">Sub Item 6</a></li>
     </ul>
     </li>
     <li><a href="#">Item3</a></li>
     <li><a href="#">Item4</a></li>
     </ul>
     </li>
     <li class="menu-l"><a href="#">Menu2</a></li>
     </ul>
     </nav>
    </div>






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Mar 7 at 16:04









    freedomn-mfreedomn-m

    13.3k32148




    13.3k32148












    • Thank You very much. This works perfect as expected. Thanks Again.

      – CreatorsCorp
      Mar 8 at 11:48

















    • Thank You very much. This works perfect as expected. Thanks Again.

      – CreatorsCorp
      Mar 8 at 11:48
















    Thank You very much. This works perfect as expected. Thanks Again.

    – CreatorsCorp
    Mar 8 at 11:48





    Thank You very much. This works perfect as expected. Thanks Again.

    – CreatorsCorp
    Mar 8 at 11:48













    0














    You could use a CSS selector to store the elements you want to "focus" on in an array. Add an event handler for 'keydown' events - if the e.code shows that the user clicked the down arrow then iterate to the next element in the array. I did this by using a generator function that will rotate back to 0 index when we reach the end of the array:






    function* nextElGenerator() 
     var liEls = document.querySelectorAll('.menu-t > ul > li > a:first-child');

     var i = 0;

     while (true) 
     yield liEls[i];
     i += 1;

     if (i === liEls.length) 
     i = 0;
     
     


    const bulletElItr = nextElGenerator();
    let curEl;

    document.addEventListener('keydown', e => 
     if (e.code === 'ArrowDown') 
     if (curEl) 
     curEl.style.backgroundColor = 'transparent';
     
     curEl = bulletElItr.next().value;
     curEl.style.backgroundColor = 'yellow';
     
    );

    <div class="containe-header">
     <nav id="nav">
     <ul>
     <li class="menu-t"><a href="#">Main</a>
     <ul>
     <li><a href="#">Item1</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     </ul>
     </li>
     <li><a href="#">Item2</a>
     <ul>
     <li><a href="#">Sub Item 1</a></li>
     <li><a href="#">Sub Item 2</a></li>
     <li><a href="#">Sub Item 3</a></li>
     <li><a href="#">Sub Item 4</a></li>
     <li><a href="#">Sub Item 5</a></li>
     <li><a href="#">Sub Item 6</a></li>
     </ul>
     </li>
     <li><a href="#">Item3</a></li>
     <li><a href="#">Item4</a></li>
     </ul>
     </li>
     <li class="menu-l"><a href="#">Menu2</a></li>
     </ul>
     </nav>
    </div>








    share|improve this answer



























      0














      You could use a CSS selector to store the elements you want to "focus" on in an array. Add an event handler for 'keydown' events - if the e.code shows that the user clicked the down arrow then iterate to the next element in the array. I did this by using a generator function that will rotate back to 0 index when we reach the end of the array:






      function* nextElGenerator() 
       var liEls = document.querySelectorAll('.menu-t > ul > li > a:first-child');

       var i = 0;

       while (true) 
       yield liEls[i];
       i += 1;

       if (i === liEls.length) 
       i = 0;
       
       


      const bulletElItr = nextElGenerator();
      let curEl;

      document.addEventListener('keydown', e => 
       if (e.code === 'ArrowDown') 
       if (curEl) 
       curEl.style.backgroundColor = 'transparent';
       
       curEl = bulletElItr.next().value;
       curEl.style.backgroundColor = 'yellow';
       
      );

      <div class="containe-header">
       <nav id="nav">
       <ul>
       <li class="menu-t"><a href="#">Main</a>
       <ul>
       <li><a href="#">Item1</a>
       <ul>
       <li><a href="#">Sub Item 1</a></li>
       <li><a href="#">Sub Item 2</a></li>
       <li><a href="#">Sub Item 3</a></li>
       <li><a href="#">Sub Item 4</a></li>
       </ul>
       </li>
       <li><a href="#">Item2</a>
       <ul>
       <li><a href="#">Sub Item 1</a></li>
       <li><a href="#">Sub Item 2</a></li>
       <li><a href="#">Sub Item 3</a></li>
       <li><a href="#">Sub Item 4</a></li>
       <li><a href="#">Sub Item 5</a></li>
       <li><a href="#">Sub Item 6</a></li>
       </ul>
       </li>
       <li><a href="#">Item3</a></li>
       <li><a href="#">Item4</a></li>
       </ul>
       </li>
       <li class="menu-l"><a href="#">Menu2</a></li>
       </ul>
       </nav>
      </div>








      share|improve this answer

























        0












        0








        0







        You could use a CSS selector to store the elements you want to "focus" on in an array. Add an event handler for 'keydown' events - if the e.code shows that the user clicked the down arrow then iterate to the next element in the array. I did this by using a generator function that will rotate back to 0 index when we reach the end of the array:






        function* nextElGenerator() 
         var liEls = document.querySelectorAll('.menu-t > ul > li > a:first-child');

         var i = 0;

         while (true) 
         yield liEls[i];
         i += 1;

         if (i === liEls.length) 
         i = 0;
         
         


        const bulletElItr = nextElGenerator();
        let curEl;

        document.addEventListener('keydown', e => 
         if (e.code === 'ArrowDown') 
         if (curEl) 
         curEl.style.backgroundColor = 'transparent';
         
         curEl = bulletElItr.next().value;
         curEl.style.backgroundColor = 'yellow';
         
        );

        <div class="containe-header">
         <nav id="nav">
         <ul>
         <li class="menu-t"><a href="#">Main</a>
         <ul>
         <li><a href="#">Item1</a>
         <ul>
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
         </ul>
         </li>
         <li><a href="#">Item2</a>
         <ul>
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
         <li><a href="#">Sub Item 5</a></li>
         <li><a href="#">Sub Item 6</a></li>
         </ul>
         </li>
         <li><a href="#">Item3</a></li>
         <li><a href="#">Item4</a></li>
         </ul>
         </li>
         <li class="menu-l"><a href="#">Menu2</a></li>
         </ul>
         </nav>
        </div>








        share|improve this answer













        You could use a CSS selector to store the elements you want to "focus" on in an array. Add an event handler for 'keydown' events - if the e.code shows that the user clicked the down arrow then iterate to the next element in the array. I did this by using a generator function that will rotate back to 0 index when we reach the end of the array:






        function* nextElGenerator() 
         var liEls = document.querySelectorAll('.menu-t > ul > li > a:first-child');

         var i = 0;

         while (true) 
         yield liEls[i];
         i += 1;

         if (i === liEls.length) 
         i = 0;
         
         


        const bulletElItr = nextElGenerator();
        let curEl;

        document.addEventListener('keydown', e => 
         if (e.code === 'ArrowDown') 
         if (curEl) 
         curEl.style.backgroundColor = 'transparent';
         
         curEl = bulletElItr.next().value;
         curEl.style.backgroundColor = 'yellow';
         
        );

        <div class="containe-header">
         <nav id="nav">
         <ul>
         <li class="menu-t"><a href="#">Main</a>
         <ul>
         <li><a href="#">Item1</a>
         <ul>
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
         </ul>
         </li>
         <li><a href="#">Item2</a>
         <ul>
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
         <li><a href="#">Sub Item 5</a></li>
         <li><a href="#">Sub Item 6</a></li>
         </ul>
         </li>
         <li><a href="#">Item3</a></li>
         <li><a href="#">Item4</a></li>
         </ul>
         </li>
         <li class="menu-l"><a href="#">Menu2</a></li>
         </ul>
         </nav>
        </div>








        function* nextElGenerator() 
         var liEls = document.querySelectorAll('.menu-t > ul > li > a:first-child');

         var i = 0;

         while (true) 
         yield liEls[i];
         i += 1;

         if (i === liEls.length) 
         i = 0;
         
         


        const bulletElItr = nextElGenerator();
        let curEl;

        document.addEventListener('keydown', e => 
         if (e.code === 'ArrowDown') 
         if (curEl) 
         curEl.style.backgroundColor = 'transparent';
         
         curEl = bulletElItr.next().value;
         curEl.style.backgroundColor = 'yellow';
         
        );

        <div class="containe-header">
         <nav id="nav">
         <ul>
         <li class="menu-t"><a href="#">Main</a>
         <ul>
         <li><a href="#">Item1</a>
         <ul>
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
         </ul>
         </li>
         <li><a href="#">Item2</a>
         <ul>
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
         <li><a href="#">Sub Item 5</a></li>
         <li><a href="#">Sub Item 6</a></li>
         </ul>
         </li>
         <li><a href="#">Item3</a></li>
         <li><a href="#">Item4</a></li>
         </ul>
         </li>
         <li class="menu-l"><a href="#">Menu2</a></li>
         </ul>
         </nav>
        </div>





        function* nextElGenerator() 
         var liEls = document.querySelectorAll('.menu-t > ul > li > a:first-child');

         var i = 0;

         while (true) 
         yield liEls[i];
         i += 1;

         if (i === liEls.length) 
         i = 0;
         
         


        const bulletElItr = nextElGenerator();
        let curEl;

        document.addEventListener('keydown', e => 
         if (e.code === 'ArrowDown') 
         if (curEl) 
         curEl.style.backgroundColor = 'transparent';
         
         curEl = bulletElItr.next().value;
         curEl.style.backgroundColor = 'yellow';
         
        );

        <div class="containe-header">
         <nav id="nav">
         <ul>
         <li class="menu-t"><a href="#">Main</a>
         <ul>
         <li><a href="#">Item1</a>
         <ul>
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
         </ul>
         </li>
         <li><a href="#">Item2</a>
         <ul>
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
         <li><a href="#">Sub Item 5</a></li>
         <li><a href="#">Sub Item 6</a></li>
         </ul>
         </li>
         <li><a href="#">Item3</a></li>
         <li><a href="#">Item4</a></li>
         </ul>
         </li>
         <li class="menu-l"><a href="#">Menu2</a></li>
         </ul>
         </nav>
        </div>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Mar 7 at 15:59









        Tom O.Tom O.

        2,64121428




        2,64121428



























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55047210%2fmove-focus-to-next-li-element-neglecting-all-nested-elements%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            1928 у кіно

            Image
            Роки в кіно   1870-ті   1880-ті 1888  • 1889 1890-ті 1890  • 1891  • 1892  • 1893  • 1894 1895  • 1896  • 1897  • 1898  • 1899 1900-ті 1900  • 1901  • 1902  • 1903  • 1904 1905  • 1906  • 1907  • 1908  • 1909 1910-ті 1910  • 1911  • 1912  • 1913  • 1914 1915  • 1916  • 1917  • 1918  • 1919 1920-ті 1920  • 1921  • 1922  • 1923  • 1924 1925  • 1926  • 1927  • 1928  • 1929 1930-ті 1930  • 1931  • 1932  • 1933  • 1934 1935  • 1936 ...
            Read more

            Захаров Федір Захарович

            Image
            Федір Захарович Захаров Федір Захаров, 1986 рік Народження 5 вересня 1919 ( 1919-09-05 ) Олександрівське [d] , Смоленська губернія , Російська СФРР Смерть 29 вересня 1997 ( 1997-09-29 ) (78 років)   Ялта , Автономн...
            Read more

            Ель Греко

            Image
            Ель Греко ісп. El Greco «Портрет старого» (Автопортрет Ель Греко), бл. 1595–1600, олія на полотні При народженні Доменікос Теотокопулос Народження 1541 ( 1541 ) Крит, Венеціанська Республіка (ни...
            Read more