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  • 1937  • 1938  • 1939 1940-ві 1940  • 1941  • 1942  • 1943  • 1944 1945  • 1946  • 1947  • 1948  • 1949 1950-ті 1950  • 1951  • 1952  • 1953  • 1954 1955  • 1956  • 1957  • 1958  • 1959 1960-ті 1960  • 1961  • 1962  • 1963  • 1964 1965  • 1966  • 1967  • 1968  • 1969 1970-ті 1970  • 1971  • 1972  • 1973  • 1974 1975  • 1976  • 1977  • 1978  • 1979 1980-ті 1980  • 1981  • 1982  • 1983  • 1984 1985  • 1986  • 1987  • 1988  • 1989 1990-ті 1990  • 1991  • 1992  • 1993  • 1994 1995  • 1996  • 1997  • 1998  • 1999 2000-ні 2000  • 2001  • 2002  • 2003  • 2004 2005
            Read more

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

            Image
            Федір Захарович Захаров Федір Захаров, 1986 рік Народження 5 вересня 1919 ( 1919-09-05 ) Олександрівське [d] , Смоленська губернія , Російська СФРР Смерть 29 вересня 1997 ( 1997-09-29 ) (78 років)   Ялта , Автономна Республіка Крим , Україна Громадянство  СРСР →  Україна Навчання Московське художньо-промислове училище імені М. І. Калініна (1935—1941) Московський художній інститут імені В. І. Сурикова (1943—1950) Діяльність художник Напрямок імпресіонізм Роки творчості 1950—1994 Покровитель А. Лентулов І. Чекмасов Г. Ряжський Вплив російський живопис кінця 19 — початку 20 століть Вплив на Бондар Іван Іванович Нагороди Премії Звання Захаров Федір Захарович у Вікісховищі ? У Вікіпедії є статті про інших людей з прізвищем Захаров. Федір Захарович Захаров ( 5 вересня 1919 ( 1919-09-05 ) , Олександрівське [d] , Російська СФРР  — 29 вересня 1997 ( 1997-09-29 ) , Ялта , Україна ) — радянський та український художник, Заслужений діяч мистецтв УРСР (1970), народний художник УРС
            Read more

            Ель Греко

            Image
            Ель Греко ісп. El Greco «Портрет старого» (Автопортрет Ель Греко), бл. 1595–1600, олія на полотні При народженні Доменікос Теотокопулос Народження 1541 ( 1541 ) Крит, Венеціанська Республіка (нині Греція) Смерть 7 квітня 1614 ( 1614-04-07 )   Толедо, Іспанія Поховання Монастир Санто Домінго де Сілос [d] Національність грек Громадянство  Іспанія Релігія Римо-католицька церква Жанр портретний живопис [d] , міфологічний живопис і релігійний живопис [d] Діяльність художник , скульптор , архітектор , митець Напрямок маньєризм Вплив Тіціан Твори Воскресіння [d] , Краєвид Толедо і Погребіння графа Оргаса [d] Автограф Ель Греко у Вікісховищі ? Ель Гре́ко (ісп. El Greco — грек, справжнє ім'я Доменікос Теотокопулос (грец. Δομήνικος Θεοτοκόπουλος ), *1541, Крит, Венеціанська Республіка — †7 квітня 1614, Толедо, Іспанія) — іспанський художник грецького походження. Один із представників Критської школи . Зміст 1 Походження і навчання 2 Ікони 3 Автопортрети 4 Італійський
            Read more