下拉动画仅在小型设备上无法正常工作 [英] Drop down animation not working properly only on small devices

问题描述

我正在尝试创建一个响应式网站。我正在使用bootstrap 3.3.7和jquery 3.2.0与visual studio 2010 vb.net。现在我正在尝试使用下拉菜单创建导航栏。我想在这个菜单中添加动画，所以我通过将其添加到类下拉列表和下拉菜单中作为css的第一步：

I am trying to create a responsive website. I am using bootstrap 3.3.7 and jquery 3.2.0 with visual studio 2010 vb.net. Now I am trying to create a navigation bar with a dropdown menu. I want to add animation to this menu so I worked as first step with css by adding this to class dropdown and dropdown-menu :

.dropdown .dropdown-menu {
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;

        max-height: 0;
        display: block;
        overflow: hidden;
        opacity: 0;
    }

    .dropdown.open .dropdown-menu 
    {
        max-height: 300px;
        opacity: 1;
    }

如你所见我的演示 [ ]如果你点击屏幕尺寸大的服务：下拉菜单完美地上下滑动。但是，当您将屏幕调整为手机屏幕大小时，您会发现下拉菜单完全向下滑动，但它没有正确滑动。



我尝试过的：



我尝试使用以下脚本使用javascript：

As you can see My Demo here [] if you click on services with screen size is big: dropdown menu is sliding up and down perfectly. But when you resize the screen as a phone screen you will realize that dropdown menu is sliding down perfectly but it's not sliding up correctly.

What I have tried:

I have tried to work with javascript using below script:

$(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');
            });
         });
      });

你可以看到完整的例子 HERE [ ]



但是当您点击多个下拉菜单时......以及当菜单滑落时，还有很多问题。



我更喜欢使用第一个解决方案（css）。有什么建议吗？

As you can see the complete example HERE[]

But also there are many problems when you click on multiple dropdown menus ... and when menu is sliding down.

I prefer to work with the first solution (css). Any suggestions?

推荐答案

（function（）{

(function () {

（'。dropdown'）。on（'show.bs。 dropdown'，function（e）{

('.dropdown').on('show.bs.dropdown', function (e) {

（this）.find（'。dropdown-menu'）。first（）。stop（true，true）.slideDown（）;
}）;

//添加SLEDUP动画停止//

(this).find('.dropdown-menu').first().stop(true, true).slideDown(); }); // ADD SLIDEUP ANIMATION TO DROPDOWN //

这篇关于下拉动画仅在小型设备上无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！