次の/前の要素にタブ移動するときにドロップダウンを閉じる

Question

DOMの前または次のTABBABLE要素にドロップダウンを閉じる必要がある問題を解決しようとしています。私はフォーカスアウトとぼかしを使ってみましたが、成功しませんでした。ここで

は、JSのフィドルです：https://jsfiddle.net/89r8sucp/21/

そしてコードは以下の通りです。

これ以上の洞察力があれば、非常に感謝しています。

ありがとうございます！

HTML

<div> 
    <p tabindex="0">Start</p> 
    <br><br><br> 
</div> 

<div id="guideNav"> 
    <div class="dropdown"> 
    <div aria-controls="guideOpt" aria-selected="true" class="guideCurr" role="menu" tabindex="0"> 
     <div>Rooms</div> 
    </div> 
    <ul aria-expanded="true" id="guideOpt" role="menu"> 
     <li role="link"> 
      <a href="#" role="menuitem" tabindex="0" title="Room 1">Room 1</a> 
     </li> 
     <li role="link"> 
      <a href="#" role="menuitem" tabindex="0" title="Room 2">Room 2</a> 
     </li> 
     <li role="link"> 
      <a href="#" role="menuitem" tabindex="0" title="Room 3">Room 3</a> 
     </li> 
     <li role="link"> 
      <a href="#" role="menuitem" tabindex="0" title="Room 4">Room 4</a> 
     </li> 
     <li role="link"> 
      <a href="#" role="menuitem" tabindex="0" title="Room 5">Room 5</a> 
     </li> 
    </ul> 
    </div> 
</div> 

<div> 
<br><br><br> 
    <p tabindex="0">End</p> 
</div> 

CSS

#guideNav .guideCurr { 
    width: 178px; 
    cursor: pointer; 
} 

#guideNav .guideCurr { 
    height: 18px; 
    padding: 8px 8px 6px 8px; 
    border: 1px solid #ccc; 
    font-size: 13px; 
    color: #444; 
    background-color: #fff; 
} 

#guideNav .guideCurr div { 
    text-overflow: ellipsis; 
    width: 153px; 
    overflow: hidden; 
    white-space: nowrap; 
    display: inline-block; 
} 

#guideNav #guideOpt { 
    display: none; 
    position: absolute; 
    top: 117px; 
    left: 55px; 
    width: 194px; 
    height: auto; 
    border: 1px solid #ccc; 
    background: #fff; 
    z-index: 2; 
    margin: 20px 0; 
} 

#guideNav #guideOpt li { 
    margin: 0; 
    list-style: none; 
    padding: 0; 
} 

JS

$(".guideCurr, #guideOpt li a").on("click focus", function(event) { 
     event.stopPropagation(); 
    $(this).next("#guideOpt").show(); 
}); 

$(document).on("click", function() { 
    $("#guideOpt").hide(); 
}); 

// Below are codes that didn't not close dropdown 
//$('.guideCurr, #guideOpt li a').focusout(function() { 
// $('#guideOpt').hide(); 
//}); 

//$(".guideCurr, #guideOpt li a").blur(function(){ 
// $('#guideOpt').hide(); 
//}); 

Answer 1

あなたは.focusout FUを使用関数、それは.click関数でなければなりません。

私はこのコードを追加して動作しています。

$('a').click(function() { 
    $('#guideOpt').hide(); 
}); 

jsfiddle：あなたのドロップダウンが焦点の損失を処理するためにhttps://jsfiddle.net/89r8sucp/23/

$(".guideCurr, #guideOpt li a").on("click focus", function(event) { 
 
     event.stopPropagation(); 
 
    $(this).next("#guideOpt").show(); 
 
}); 
 

 
$(document).on("click", function() { 
 
    $("#guideOpt").hide(); 
 
}); 
 

 
// Below are codes that didn't not close dropdown 
 
//$('.guideCurr, #guideOpt li a').focusout(function() { 
 
// $('#guideOpt').hide(); 
 
//}); 
 

 
//$(".guideCurr, #guideOpt li a").blur(function(){ 
 
// $('#guideOpt').hide(); 
 
//}); 
 

 
$('a').click(function() { 
 
    $('#guideOpt').hide(); 
 
});

#guideNav .guideCurr { 
 
    width: 178px; 
 
    cursor: pointer; 
 
} 
 

 
#guideNav .guideCurr { 
 
    height: 18px; 
 
    padding: 8px 8px 6px 8px; 
 
    border: 1px solid #ccc; 
 
    font-size: 13px; 
 
    color: #444; 
 
    background-color: #fff; 
 
} 
 

 
#guideNav .guideCurr div { 
 
    text-overflow: ellipsis; 
 
    width: 153px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
} 
 

 
#guideNav #guideOpt { 
 
    display: none; 
 
    position: absolute; 
 
    top: 117px; 
 
    left: 55px; 
 
    width: 194px; 
 
    height: auto; 
 
    border: 1px solid #ccc; 
 
    background: #fff; 
 
    z-index: 2; 
 
    margin: 20px 0; 
 
} 
 

 
#guideNav #guideOpt li { 
 
    margin: 0; 
 
    list-style: none; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p tabindex="0">Start</p> 
 
    <br><br><br> 
 
</div> 
 

 
<div id="guideNav"> 
 
    <div class="dropdown"> 
 
    <div aria-controls="guideOpt" aria-selected="true" class="guideCurr" role="menu" tabindex="0"> 
 
     <div>Rooms</div> 
 
    </div> 
 
    <ul aria-expanded="true" id="guideOpt" role="menu"> 
 
     <li role="link"> 
 
      <a href="#" role="menuitem" tabindex="0" title="Room 1">Room 1</a> 
 
     </li> 
 
     <li role="link"> 
 
      <a href="#" role="menuitem" tabindex="0" title="Room 2">Room 2</a> 
 
     </li> 
 
     <li role="link"> 
 
      <a href="#" role="menuitem" tabindex="0" title="Room 3">Room 3</a> 
 
     </li> 
 
     <li role="link"> 
 
      <a href="#" role="menuitem" tabindex="0" title="Room 4">Room 4</a> 
 
     </li> 
 
     <li role="link"> 
 
      <a href="#" role="menuitem" tabindex="0" title="Room 5">Room 5</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div> 
 
<br><br><br> 
 
    <p tabindex="0">End</p> 
 
</div>

Answer 2

、メニューの各項目は、この場合におけるLiリンクは、必要があるだろうonblurイベント。

<div id="guideNav"> 
    <div class="dropdown"> 
    <div aria-controls="guideOpt" aria-selected="true" class="guideCurr" role="menu" tabindex="0"> 
     <div>Rooms</div> 
    </div> 
    <ul aria-expanded="true" id="guideOpt" role="menu"> 
     <li role="link"> 
      <a href="#" role="menuitem" tabindex="0" title="Room 1" onblur="closeMe">Room 1</a> 
     </li> 
     <li role="link"> 
      <a href="#" role="menuitem" tabindex="0" title="Room 2" onblur="closeMe">Room 2</a> 
     </li> 
     <li role="link"> 
      <a href="#" role="menuitem" tabindex="0" title="Room 3" onblur="closeMe">Room 3</a> 
     </li> 
     <li role="link"> 
      <a href="#" role="menuitem" tabindex="0" title="Room 4" onblur="closeMe">Room 4</a> 
     </li> 
     <li role="link"> 
      <a href="#" role="menuitem" tabindex="0" title="Room 5" onblur="closeMe">Room 5</a> 
     </li> 
    </ul> 
    </div> 
</div> 
<script> 
function closeMe(){ 
    var dropdown = document.getElementById("guideOpt"); 
    dropdown.style.display = "none"; 
} 
</script> 

フォーカスを失った場合、ドロップダウンを非表示にするためにclose関数を呼び出します。 これはいくつかの洞察を提供します。