Question

我正在尝试将动画添加到我的下拉菜单中...它在大屏幕上完美运行但在小型手机和平板电脑上（当出现切换导航时）存在一个问题：它应该向下滑动下拉菜单列表消失，没有正确滑动，你可以在我看到 DEMO 。请尝试以小浏览器尺寸打开它，然后点击＆＃34; services＆＃34;向下滑动。

我尝试过使用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/

滑动下拉不是完美的

1 个答案: