将焦点设置在悬停 jquery 上的隐藏元素上答案

【问题标题】：Set focus on hidden element on hover jquery将焦点设置在悬停 jquery 上的隐藏元素上
【发布时间】：2014-01-07 16:40:40
【问题描述】：

我有一个隐藏列表，在 CSS 中使用 display:none 隐藏。

当我将鼠标悬停在<span> 列表项上时，我想显示这个隐藏列表。这是用 jQuery 实现的小菜一碟：

$('#id').hover(function () {
   $('#hidden').toggle();
});

我的问题是隐藏列表显示在页面底部的页脚栏正下方，因此当它设置为block/visible 并显示时，用户必须向下滚动才能看到它，此时元素变为隐藏，因为不再触发悬停事件。

我已经尝试自动滚动到元素的底部，并确保隐藏元素也包含在我认为可能会这样做的hover 事件选择器中：

$('#service-footer-list').scrollTop($('#service-footer-list').scrollHeight);

但这没有帮助。

我需要做的是在用户无需滚动页面的情况下将这个隐藏元素显示出来。如何实现？

这是我正在使用的标记示例：

<div class="footer">
   <div class="footer-container">
        <ul id="footer-list">
            <li id="ftr-service-list">
                <span>Service list</span>
            </li>
            <li id="ftr-contact"><a href="foo">Contact us</a></li>
        </ul>
   </div>
   <div id="service-footer-list">
        <ul class="service-list-dropdown">
            <li><span>Service title</span></li>
            <li><span>Service title</span></li>
            <li><span>Service title</span></li>
            <li><span>Service title</span></li>
            <li><span>Service title</span></li>
            <li><span>Service title</span></li>
        </ul>
   </div>
</div>

悬停Service list <span> 元素时需要显示service-footer-list。

【问题讨论】：

你需要使用CSS+绝对定位。
@Diodeus 你能详细说明一下吗？
见：stackoverflow.com/questions/18154212/…
@Diodeus 当列表刷新到页面底部时，这并没有真正的帮助。该列表显示在悬停时，您仍然需要向下滚动才能看到它。如果我将元素定位在视图中但它会在屏幕外渲染
@DGibbs 你可以改变#service-footer-list 的位置吗？或者#service-footer-list 是否必须开始刷新到页面底部？如果您可以更改位置，您可以尝试将#service-footer-list 的位置设为绝对位置，然后选择您希望它在屏幕上的位置。

标签： jquery html css focus

【解决方案1】：

我通过在菜单列表可见后滚动到它来解决这个问题：

$(document).ready(function () {
    var services = $('#service-footer-list');
    if (!IsTouchDevice()) 
    {
        $('.footer #ftr-service-list span, #service-footer-list, #ftr-service-list').mouseenter(function () {
            if (!services.is(":visible")) {
                $(services).show();
                $('#ftr-service-list').addClass('toggle-service-arrow');
                $('body,html').animate({ scrollTop: $(services).offset().top }, 800);
            }
        });
        $('#site-main').mouseenter(function () {
            if (services.is(":visible")) {
                $('#ftr-service-list').removeClass('toggle-service-arrow');
                $(services).slideUp(500);
            }
        }); 
    } 
});

【讨论】：