2

我有一个支持键盘导航的列表。但是，还有一个额外的 jiggery pokery（本示例中不包含）显示和隐藏列表中的项目。隐藏项目后，键盘导航需要继续运行，但仅适用于可见项目。

我有这个工作得很好。当最后一个可见项目是当前项目，然后用户再次按下时，就会出现问题。当前类被删除，它试图移动到一个不存在的项目。向上导航时也会发生同样的事情。

如何仅导航可见项目并让它在第一个和最后一个可见项目上停止？

jQuery(document).keydown(function(e) {

  e.preventDefault();

  if (e.keyCode == 38) { // Capture Arrow Up key 38

    var currentItem = jQuery(".options").children("li.current").removeClass("current").prevAll(':visible:first').addClass("current");

  } else if (e.keyCode == 40) { // Capture Arrow Down key 40


    var currentItem = jQuery(".options").children("li.current").removeClass("current").nextAll(':visible:first').addClass("current");
  }
});
.current {
  border: solid 1px #f60 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="options">
  <li class="current"><a href="#"><span>WW Portfolio Regions</span><span class="hidden">0</span></a>
  </li>
  <li><a href="#"><span>EMEA</span><span class="hidden">1</span></a>
  </li>
  <li><a href="#"><span>Americas</span><span class="hidden">2</span></a>
  </li>
  <li><a href="#"><span>AP</span><span class="hidden">3</span></a>
  </li>
  <li><a href="#"><span>NE IOT</span><span class="hidden">4</span></a>
  </li>
  <li><a href="#"><span>SW IOT</span><span class="hidden">5</span></a>
  </li>
  <li><a href="#"><span>CCE IOT</span><span class="hidden">6</span></a>
  </li>
  <li><a href="#"><span>MEA IOT</span><span class="hidden">7</span></a>
  </li>
</ul>

4

1 回答 1

1

如果当前元素是最后一个，nextAll()将返回一个空的 jQuery 对象。您可以测试这种情况，如果它不是第一个（或最后一个）元素，则仅从当前元素中删除该类：

jQuery(document).keydown(function(e) {
    var currentItem = jQuery(".options").children("li.current");
    if (e.keyCode == 27) {         // Capture Esc key 27
        e.preventDefault();
        closeOptions(ddOptions, thisDd);
    } else if (e.keyCode == 38) {  // Capture Arrow Up key 38
        e.preventDefault();         
        var prevItem = currentItem.prevAll(":visible:first");
        if (prevItem.length) {
            currentItem.removeClass("current");
            prevItem.addClass("current");
        }
    } else if (e.keyCode == 40) {  // Capture Arrow Down key 40
        e.preventDefault();         
        var nextItem = currentItem.nextAll(":visible:first");
        if (nextItem.length) {
            currentItem.removeClass("current");
            nextItem.addClass("current");
        }
    }
});
于 2011-07-01T10:05:19.010 回答