javascript - 将焦点移至下一个“li”元素,忽略所有嵌套元素
问题描述
我的菜单结构如下。
$('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>
问题是将焦点从 Item1 移动到 Item2 和 Item3 等等...通过按下箭头键(我使用 Mousetrap 库来检测按键)
到目前为止我所尝试的..
1.
var focused_index = 1;
focused_index=focused_index - 1;
$('a').eq(focused_index).focus();
但是这种方法侧重于嵌套元素意味着从 item1 到 Sub Item 1 再到 Sub Item 2 等等。
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;
但这会导致在 Body 标签内具有焦点的其他元素出现问题。
- 来自这个问题的答案使用 jQuery 将焦点发送到动态 li
那么我怎样才能将焦点从 Item1 转移到 Item2。
解决方案
我想专注于 Item2 的元素。然后到 Item3 的元素。
您可以使用:
$("a:focus").closest("li").next().find("a").first().focus();
工作片段:
// 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>
推荐阅读
- c++ - C/C++ 中 assert(false) 的更好替代方案
- ajax - 如何修复 laravel 404 NotFoundHttpException 错误?
- javascript - 是否有 lodash 或其他函数来搜索对象数组的数组以查找匹配的键/值?
- node.js - 更改 Node.js 新 Error 对象的前三行?
- android - 向 Google Play 商店中的现有应用提交更新:“运行 bundletool build-apks 时发生错误”
- javascript - 有没有一种方法可以使用 javascript mslink.sh 创建 lnk 文件
- javascript - 如何显示文档选择器对话框 - Alfresco 6
- android - 类 DescriptorExtractor 在适用于 Android 的 opencv 4.1.0 中不可用
- azure - 需要在电子邮件通知中发送发布测试结果图表
- postgresql - 禁止用户的所有者对该表进行 GRANTing