滑动下拉菜单不能完美工作

Question

我正在尝试将动画添加到我的下拉菜单中...它在大屏幕上工作得很好，但在小手机和平板电脑上(当切换导航出现时)就会有一个问题:当它应该向上滑动时，下拉列表消失了，没有像你在my DEMO 中看到的那样正确地向上滑动。请尝试在小浏览器中打开它，然后单击“服务”向下和向上滑动。

我尝试了另一个使用jquery的解决方案：

$(function () {
            $('.dropdown').on('show.bs.dropdown', function (e) {
                $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
            });

            // ADD SLIDEUP ANIMATION TO DROPDOWN //
            $('.dropdown').on('hide.bs.dropdown', function (e) {
                e.preventDefault();
                $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function () {
                    $('.dropdown').removeClass('open');
                    $('.dropdown').find('.dropdown-toggle').attr('aria-expanded', 'false');
                });

            });
        });

但正如您在此Bootply DEMO中看到的(将浏览器大小调整为手机屏幕大小)，当向下滑动时，在最后会出现一个灰色空间，然后直接消失。

我真正需要的是一个正常工作的幻灯片动画。对如何调整这两种方法中的至少一种有什么建议吗？

Answer 1

我找到了解决方案，你应该从导航栏中删除滚动条。

将这个简单的代码添加到您的文件中:

.navbar-collapse {
     overflow: hidden;
}

您可以在此处查看演示：https://jsfiddle.net/u9pvtLpw/2/