jquery - 如何使用 jquery 中的导航键聚焦到选定的 li

Question

<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>testmail@test.com</a>
            </li>
            <li><a>testmail2@test.com</a>
            </li>
            <li><a>testmail3@test.com</a>
            </li>
            <li><a>testmail4@test.com</a>
            </li>
            <li><a>testmail5@test.com</a>
            </li>
            <li><a>testmail6@test.com</a>
            </li>
            <li><a>testmail7@test.com</a>
            </li>
            <li><a>testmail8@test.com</a>
            </li>
            <li><a>testmail9@test.com</a>
            </li>
            <li><a>testmail0@test.com</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');
            }
        }
    });
});

当添加所选类时，我需要关注并滚动到列表元素。我尝试了上面的代码来实现它。有人可以发现我的代码有什么问题并帮助我找到解决方案吗？提前致谢。下面是 fiddle 链接

http://jsfiddle.net/MCxbS/1

Answer 1

您只需将以下行添加到您的代码中。

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

看看下面的 fiddle Demo