当元素可见时，全神贯注于它

Question

我有一个下拉按钮，只有当下拉菜单可见时，才能在键盘上按下向上/向下箭头键时绑定键盘事件。

我在几个网页上看到人们完全专注于弹出模式。我正在切换一个类来检查下拉列表是否可见。但是我不知道用键盘键来绑定，比如输入键来选择一个li。或使用向上/向下键移动可见的列表项。

这可能实现吗？

$(".btn").on('click', function(e) {
  e.stopPropagation();
  var $dropdown = $(this).siblings().fadeToggle().toggleClass('visible');
  $('.dropdown .btn-dropdown').not($dropdown).fadeOut();
});

$(document).on('click', function(e) {
  $('.dropdown .btn-dropdown').fadeOut();
});

.btn {
  outline: none;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #eee;
  color: #7b7b7b;
  width: 150px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
  font-weight: bold;
  margin-bottom: 20px;
}

.dropdown {
  position: relative;
  display: inline;
}

.btn-dropdown {
  padding: 0px;
  margin: 0px;
  list-style: none;
  background-color: #fff;
  position: absolute;
  left: 0px;
  top: 30px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
  min-width: 200px;
  border: 1px solid #ddd;
  text-align: initial;
  max-height: 210px;
  overflow: auto;
  display: none;
  z-index: 100;
}

.btn-dropdown li {
  padding: 6px;
  margin: 0px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.btn-dropdown li:hover {
  background-color: #ddd;
}

.btn-dropdown li:last-child {
  border-bottom: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn first">Select something</button>
  <ul class="btn-dropdown">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>

Answer 1

您可以尝试这样的事情：

$(document).on("keyup", function(e) {
  var l = $('.btn-dropdown');
  if ($('.btn-dropdown:visible').length && e.keyCode == 38) {
    if ($(l).find(".selected").length == 0) {
      $(l).find("li:last").addClass("selected")
    } else {
      $(l).find("li.selected").removeClass("selected").prev().addClass("selected")
    }
  } else if ($('.btn-dropdown:visible').length && e.keyCode == 40) {

    if ($(l).find(".selected").length == 0) {
      $(l).find("li:first").addClass("selected")
    } else {
      $(l).find("li.selected").removeClass("selected").next().addClass("selected")
    }

  }
})

$('.btn-dropdown:visible').length && e.keyCode == 38会检查“下拉列表”是否可见以及是否点击了上传键

工作演示

$(".btn").on('click', function(e) {
  e.stopPropagation();
  var $dropdown = $(this).siblings().fadeToggle().toggleClass('visible');
  $('.dropdown .btn-dropdown').not($dropdown).fadeOut();
});

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1 && $('.btn-dropdown:visible')) {
        e.preventDefault();
    }
}, false);

$(document).on("keyup", function(e) {
  var l = $('.btn-dropdown');
  if ($('.btn-dropdown:visible').length && e.keyCode == 38) {
    if ($(l).find(".selected").length == 0) {
      $(l).find("li:last").addClass("selected")
    } else {
      $(l).find("li.selected").removeClass("selected").prev().addClass("selected")
    }
  } else if ($('.btn-dropdown:visible').length && e.keyCode == 40) {

    if ($(l).find(".selected").length == 0) {
      $(l).find("li:first").addClass("selected")
    } else {
      $(l).find("li.selected").removeClass("selected").next().addClass("selected")
    }

  }
})

$(document).on('click', function(e) {
  $('.dropdown .btn-dropdown').fadeOut();
});

.btn {
  outline: none;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #eee;
  color: #7b7b7b;
  width: 150px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
  font-weight: bold;
  margin-bottom: 20px;
}

.dropdown {
  position: relative;
  display: inline;
}

.btn-dropdown {
  padding: 0px;
  margin: 0px;
  list-style: none;
  background-color: #fff;
  position: absolute;
  left: 0px;
  top: 30px;
  box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
  min-width: 200px;
  border: 1px solid #ddd;
  text-align: initial;
  max-height: 210px;
  overflow: auto;
  display: none;
  z-index: 100;
}

.btn-dropdown li {
  padding: 6px;
  margin: 0px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.btn-dropdown li:hover,
.btn-dropdown li.selected {
  background-color: #ddd;
}

.btn-dropdown li:last-child {
  border-bottom: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn first">Select something</button>
  <ul class="btn-dropdown">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>