H.AL Ответов: 0

Выпадающая анимация не работает должным образом только на небольших устройствах

Я пытаюсь создать адаптивный веб-сайт. Я использую bootstrap 3.3.7 и jquery 3.2.0 с visual studio 2010 vb.net. Теперь я пытаюсь создать навигационную панель с выпадающим меню. Я хочу добавить анимацию в это меню, поэтому я работал как первый шаг с css, добавив это в выпадающее меню класса и выпадающее меню :

.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, используя следующий скрипт:

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


Как вы можете видеть полный пример ЗДЕСЬ[]

Но также есть много проблем, когда вы нажимаете на несколько выпадающих меню ... и когда меню скользит вниз.

Я предпочитаю работать с первым решением (css). Есть предложения?

0 Ответов