Drop down animation not working properly only on small devices

See more:

drop-down

animation

CSS3

, +

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;
    }

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

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?