jquery - 如何使用jQuery中的导航键将注意力集中在所选的li上

<div class='share-hold'>
   <i class="fa fa-share-alt"></i>
   <div class="share">
      <div class='input-hold'>
         <input type="email" placeholder="Email" />
      </div>
      <div class="share-drop">
         <ul class="dropdown-notif">
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
            <li><a>[email protected]</a>
            </li>
         </ul>
      </div>
   </div>
</div>

.share-drop .dropdown-notif{
    display: none;
    background-color: #fff;
    position: absolute;
    top: 49px;
    z-index: 1;
    height: 200px !important;
    overflow-y: auto;
}
.share-drop .dropdown-notif li{
    padding: 8px 0px 8px 5px  !important;
    position: relative;
    list-style-type: none;
}
.share-drop .dropdown-notif li a{
    padding: 0 !important;
}
.frsh-wrapper article:last-child .user-grp li:last-child .share-drop .dropdown-notif{
    top: -204px;
}
.share-drop .dropdown-notif li.selected{
    background-color: #ddd;
}

$('.share-drop .dropdown-notif li').click(function() {
    var value = $(this).find('a').text();
    $(this).parents('.share').find('input').val(value);
    $('.share-drop .dropdown-notif').hide();
});
$(".share .input-hold input").keyup(function() {
    $(this).parents('.share').find('.share-drop .dropdown-notif').show();
    if ($(this).val() == '') {
        $('.share-drop .dropdown-notif').hide();
    }
});
$(function() {
    var li = $('.share-drop .dropdown-notif li');
    var liSelected;
    $(window).keydown(function(e) {
        if (e.which === 40) {
            if (liSelected) {
                liSelected.removeClass('selected');
                next = liSelected.next();
                if (next.length > 0) {
                    liSelected = next.addClass('selected');
                } else {
                    liSelected = li.eq(0).addClass('selected');
                }
            } else {
                liSelected = li.eq(0).addClass('selected');
            }
        } else if (e.which === 38) {
            if (liSelected) {
                liSelected.removeClass('selected');
                next = liSelected.prev();
                if (next.length > 0) {
                    liSelected = next.addClass('selected');
                } else {
                    liSelected = li.last().addClass('selected');
                }
            } else {
                liSelected = li.last().addClass('selected');
            }
        }
    });
});

我需要集中精力，并滚动到列表元素时，它是与类选择添加。我尝试了上面的代码来实现它。有人能帮我找出我的代码有什么问题并帮我找到解决方法吗。提前谢谢。
下面是小提琴的链接
http://jsfiddle.net/MCxbS/1

最佳答案

所有你需要添加以下行到你的代码。

$('.share-drop .dropdown-notif').scrollTop($('.selected').position().top);

看看下面的小提琴
Demo

关于jquery - 如何使用jQuery中的导航键将注意力集中在所选的li上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24957177/