Question

我有一个下拉菜单，当您单击输入字段时会打开该菜单，并在单击向上或向下箭头键时激活所选项目的蓝色背景。它还将所选项目保持在顶部以防止选择消失。

我想要做的是修复＆＃39; top＆＃39;在用户单击向下箭头键一次后，在菜单中间，以便当用户向上或向下滚动时，选择位于中间。

我试图通过将它分成两半来使用scrollTop（）方法，但我似乎无法使其工作。

＆＃13;

$( document ).ready(function() {

var $menu = $('#menu');
var $input = $('#maininput');

$menu.hide();

$input.focus(function () {
  $menu.show();         
});

$input.blur(function () {
  $menu.hide();         
});

$input.on('keyup', function (e) {
 if (e.keyCode === 40 ) { // down
  e.preventDefault();
  var selected = $(".selected");
  var $list = $("li.list");
  var index = $list.index(selected);
  $list.removeClass("selected");
  $list.eq(index + 1).addClass("selected");
  $(".main ul").scrollTop($('li').index($(".selected")) * $('.main li').height()); 
 }

 if (e.keyCode === 38) { // up
  e.preventDefault();
  var selected = $(".selected");
  var $list = $("li.list");
  var index = $list.index(selected);
  $list.removeClass("selected");
  $list.eq(index - 1).addClass("selected");
  $(".main ul").scrollTop($('li').index($(".selected")) * $('.main li').height());    
 }
})
});

＆＃13;

li {
  list-style: none;
}

ul {
  padding: 0px;
  margin: 0px;
  background-color: #eee;
  width: 130px;
  height: 120px;
  overflow: auto;
  overflow-x:hidden;
  border-spacing: 10px;
}

.list { 
/*   padding-top: 5px;
  padding-bottom: 5px; */
  padding-left: 10px;
  height: 40px;
  line-height: 2.1em;
}

#maininput {
  padding: 10px;
}

.selected {
  background-color: #d2d2d2;
  border-radius: 4px;
  width: 220px;
  background-color: #0096d6;
  border-radius: 4px;
  width: 100%;
  color: #ffffff;
}

＆＃13;

<html>  
<body>
<input id="maininput" />
<div class="main">
  <ul id="menu">
    <li class="list">one</li>
    <li class="list">two</li>
    <li class="list">three</li>
    <li class="list">four</li>
    <li class="list">five</li>
    <li class="list">six</li>
    <li class="list">seven</li>
    <li class="list">eight</li>
    <li class="list">nine</li>
    <li class="list">ten</li>
  </ul>
</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</body>
</html>

＆＃13;

帮助表示赞赏。感谢。

Answer 1

在javascript中编辑此行（向上和向下）：

$(".main ul").scrollTop($('li').index($(".selected")) * $('.main li').height());

这一行：

$(".main ul").scrollTop(($('li').index($(".selected"))-1) * $('.main li').height());

使用箭头键滚动时，在ul元素的中间设置菜单顶部

1 个答案: