Question

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

当我将鼠标悬停在<span>列表项上时，我想显示此隐藏列表。这是在jQuery中实现的一块蛋糕：

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

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

我尝试过自动滚动到元素的底部并确保隐藏元素也包含在我认为可能会执行的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-footer-list Service list元素时，需要显示<span>。

Answer 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);
            }
        }); 
    } 
});

将焦点放在悬停jquery上的隐藏元素上

1 个答案: