Question

我正在构建一个包含子菜单的长菜单。这是链接：http://ws2.5giants.com/ - 将浏览器缩小到768像素以下以查看移动视图。在下拉菜单中，点击＆＃34; Sample＆＃34;你可以使用当前的菜单行为。

我正在尝试复制http://www.porsche.com/usa/上的行为，当您点击某个子菜单项时，该项会在子菜单展开时滚动到菜单顶部。例如，缩小窗口，打开窗口，然后单击＆＃34;模型＆＃34;。

有谁知道他们是怎么做到的？

谢谢！

Answer 1

Khargoosh是对的。单击菜单项时，它会折叠所有其他菜单项，然后滚动到所单击项的顶部。

试试这个：

编辑以显示在单击下拉列表以关闭它时如何向后滚动到顶部。

$(document).ready(function (){ 
    $('.dropdown-submenu a').click(function() {
        if($(this).parent().find('ul.dropdown-menu').is(':visible'))
            $('html, body').animate({ scrollTop: $('navbar-nav').offset().top }, 600);
        }else{
            $('html, body').animate({ scrollTop: $(this).offset().top }, 600);
    }); 
});

通过这篇文章向Steve致谢：jQuery scroll to element

Answer 2

当您点击子菜单项时，该项目会滚动到菜单顶部＆gt;随着子菜单的扩展

我不认为这实际上描述了链接网站上发生的事情。对我来说，看起来非活动子菜单被折叠，点击的子菜单被展开，窗口将向下滚动到第一个条目。

您可以使用（例如）jQuery .scrollTop()来获取所单击元素的垂直滚动条位置，然后将垂直滚动条位置设置为该元素。

打开时向下滑动的下拉子菜单

2 个答案: