2017-01-03 23 views
-1

フォーカスが<li>の子要素にある場合、親<ul>を強調表示しようとしています。私はこれを達成するために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" > 

のjQuery:

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

これは<li>タグによってトリガーされるアクセスドロップダウンメニューを見つけるために、視覚的QUESを必要とキーボードのみのユーザーに対応するために行われています。

フィドル: https://jsfiddle.net/progSrCa/d3au7k9c/

更新:

私は、問題は 'UL' と '李' の関係にあることに気づいた、と私はそれに応じて更新されています。

+1

あなたは、このためのフィドルをしてくださいことはできますか?あなたのコードはあまり明確ではありません。 – Troyer

+0

アクセシビリティについては、[aria-posinset](https://www.w3.org/TR/wai-aria-1.1/#aria-posinset)と[aria-setsize](https:// www。 w3.org/TR/wai-aria-1.1/#aria-setsize) – thekodester

+0

@kodecountコードを追加しましたが、asp.netの部分から生成されており、完全な機能へのアクセスが制限されています。 – Joshua

答えて

2

他の入力のフォーカスから、または指定したdivをクリックして、フォーカスをトリガーできます。これは必須のjQueryコードです。完全な例のためにセイフィドル。

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

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

フィドル:https://jsfiddle.net/q0m4hff9/

+0

@Kristfral非常にありがとう、これは私の問題を解決しました。 – Joshua

0

あなたはリスト要素(LI)を注力しようとしています。私は、HTML Select、テキストエリア、入力、ボタン、およびタグに集中できると信じています。追加する要素にtabindex属性を追加することで、フォーカスを強制的に試すことができます。フォーカスハンドラをトリガすることでjqueryでトリックを行うことはできますが、イベントはトリガできません。

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

Fiddle

+0

を明確にするために、私がしようとしていたのは、内部の子供がターゲットにされたときに、親要素にフォーカスを追加することでした。私はタブのフォーカスを合わせた要素 "subTabAction"をフォーカスしてフォーカスを得ることができます。フォーカスしたときに、その要素に視覚的なインジケータを追加しようとしていました。 – Joshua

関連する問題