html - 滑动下拉不能完美工作

Question

我正在尝试将动画添加到我的下拉菜单中......它在大屏幕上运行良好，但在小型手机和平板电脑上(当切换导航出现时)有一个问题:何时应该向上滑动下拉菜单正如您在我的中看到的那样，列表没有正确向上滑动就消失了 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

我找到了解决方案，您应该从导航栏中删除滚动条。
所以将这个简单的代码添加到您的 css 文件中:

.navbar-collapse {
     overflow: hidden;
}

您可以在这里查看演示:https://jsfiddle.net/u9pvtLpw/2/