在下一個/上一個元素上關閉下拉列表時

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福它應該是.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

爲了讓您的下拉處理失焦，菜單中的每個項目，在這種情況下，李的聯繫，將需要一個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> 

然後，他們會調用關閉功能，以便在失去焦點時隱藏下拉菜單。 希望這提供了一些見解。