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.
- 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
edited Mar 7 at 15:27
Jeremy Thille
14k42339
asked Mar 7 at 15:19
CreatorsCorpCreatorsCorp
186
|
show 3 more comments
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.
- 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
edited Mar 7 at 15:27
Jeremy Thille
14k42339
asked Mar 7 at 15:19
CreatorsCorpCreatorsCorp
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,bindis old syntax and has been deprecated. Look aton.
– 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 onlielements. Maybe you can explain exactly what you're expecting to happen?
– freedomn-m
Mar 7 at 15:39
|
show 3 more comments
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.
- 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
edited Mar 7 at 15:27
Jeremy Thille
14k42339
asked Mar 7 at 15:19
CreatorsCorpCreatorsCorp
186
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.
- 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
edited Mar 7 at 15:27
Jeremy Thille
14k42339
asked Mar 7 at 15:19
CreatorsCorpCreatorsCorp
186
edited Mar 7 at 15:27
Jeremy Thille
14k42339
asked Mar 7 at 15:19
CreatorsCorpCreatorsCorp
186
edited Mar 7 at 15:27
Jeremy Thille
14k42339
edited Mar 7 at 15:27
Jeremy Thille
14k42339
edited Mar 7 at 15:27
Jeremy Thille
14k42339
14k42339
asked Mar 7 at 15:19
CreatorsCorpCreatorsCorp
186
asked Mar 7 at 15:19
CreatorsCorpCreatorsCorp
186
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,bindis old syntax and has been deprecated. Look aton.
– 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 onlielements. Maybe you can explain exactly what you're expecting to happen?
– freedomn-m
Mar 7 at 15:39
|
show 3 more comments
1
Given your html structure:$('a').eq(focused_index).closest("li").next().find("a").first().focus();
– freedomn-m
Mar 7 at 15:24
FYI,bindis old syntax and has been deprecated. Look aton.
– 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 onlielements. 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
|
show 3 more comments
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>answered Mar 7 at 16:04
freedomn-mfreedomn-m
13.3k32148
Thank You very much. This works perfect as expected. Thanks Again.
– CreatorsCorp
Mar 8 at 11:48
add a comment |
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>answered Mar 7 at 15:59
Tom O.Tom O.
2,64121428
add a comment |
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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>answered Mar 7 at 16:04
freedomn-mfreedomn-m
13.3k32148
Thank You very much. This works perfect as expected. Thanks Again.
– CreatorsCorp
Mar 8 at 11:48
add a comment |
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>answered Mar 7 at 16:04
freedomn-mfreedomn-m
13.3k32148
Thank You very much. This works perfect as expected. Thanks Again.
– CreatorsCorp
Mar 8 at 11:48
add a comment |
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>answered Mar 7 at 16:04
freedomn-mfreedomn-m
13.3k32148
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>answered Mar 7 at 16:04
freedomn-mfreedomn-m
13.3k32148
answered Mar 7 at 16:04
freedomn-mfreedomn-m
13.3k32148
answered Mar 7 at 16:04
freedomn-mfreedomn-m
13.3k32148
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
add a comment |
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
add a comment |
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>answered Mar 7 at 15:59
Tom O.Tom O.
2,64121428
add a comment |
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>answered Mar 7 at 15:59
Tom O.Tom O.
2,64121428
add a comment |
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>answered Mar 7 at 15:59
Tom O.Tom O.
2,64121428
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>answered Mar 7 at 15:59
Tom O.Tom O.
2,64121428
answered Mar 7 at 15:59
Tom O.Tom O.
2,64121428
answered Mar 7 at 15:59
Tom O.Tom O.
2,64121428
answered Mar 7 at 15:59
Tom O.Tom O.
2,64121428
2,64121428
add a comment |
add a comment |
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
1
Given your html structure:
$('a').eq(focused_index).closest("li").next().find("a").first().focus();– freedomn-m
Mar 7 at 15:24
FYI,
bindis old syntax and has been deprecated. Look aton.– 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 onlielements. Maybe you can explain exactly what you're expecting to happen?– freedomn-m
Mar 7 at 15:39