将焦点添加到焦点子元素上的父元素

Question

当焦点在子元素上时，我试图突出显示父<ul> <li>。我正在使用jQuery来实现这一点，但焦点不会转移。

.HTML：

 ul class="nav @if (Request.Browser.IsMobileDevice){@Html.Raw("nav-pills")}else{@Html.Raw("nav-pills")}">
            <li class="dropdown" style="cursor:pointer" id="accessFunction">
   <a style="color: lightgray; text-shadow: 1px 1px 1px #111; webkit-text-shadow: 1px 1px 1px #111;font-size:18px;background-color:transparent;padding-right:5px" class="dropdown-toggle subTabAction" data-toggle="dropdown" id="dropAccess" >

j查询：

$('#dropAccess').focus()
$(this).find('#accessFunction').focus();

这样做是为了仅容纳需要视觉查询的键盘用户，以查找由 <li> 标记触发的可访问下拉菜单。

小提琴：https://jsfiddle.net/progSrCa/d3au7k9c/

更新：

我意识到问题出在"ul"和"li"关系上，我已经相应地进行了更新。

Answer 1

您可以从另一个输入的焦点触发焦点，也可以在单击给定的div 时触发焦点。这是必需的 jQuery 代码。Se 小提琴的完整示例。

$( "#otherInput" ).focus(function() {
  $( "#target" ).focus();
});
$( "#plainDiv" ).click(function() {
  $( "#target" ).focus();
});

小提琴：https://jsfiddle.net/q0m4hff9/

Answer 2

您是否正在尝试聚焦列表元素 （li）。我相信您可以专注于HTML选择，文本区域，输入，按钮和标签。您可以尝试通过将 TabIndex 属性添加到要添加的元素来强制焦点。你仍然可以使用 jquery 做一些技巧，通过触发焦点处理程序而不是事件。

$('#accessFunction').triggerHandler( "focus" );

小提琴