Bootstrap 3 Dropdown Slidedown Странное поведение при смене Navbar

Итак, я добавлял некоторые анимации в выпадающие списки на панели навигации, но по какой-то причине наиболее приемлемый ответ (Добавление эффекта слайда в раскрывающийся список начальной загрузки), кажется, сломался или стал "обычный" размер при движении по маленьким размерам окна.

Итак, странно, что это происходит только с анимацией slideUp из опубликованной статьи:

// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown(5000);
});

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(5000);
});

Я могу скопировать и вставить эти строки в консоль Google Chrome на http://bootswatch.com/default/, изменить свое разрешение на то, где сбой нарбаров, и они все ломаются. (Я увеличил время анимации, чтобы попробовать и устранить неполадки.)

Normal:

Normal Menu

Сломанный SlideUp:

SlideUp

Но по какой-то причине, если я запустил $('.navbar').find('.dropdown-menu').slideUp(5000);, я получаю меню нормального поведения:

Expected Behavior

Мысли?

Обновить. Он работает с последним параметром, потому что он не удаляет класс 'open' из входящего в него элемента LI. Поэтому, возможно, класс open подвергается преждевременному удалению во время работы анимации.

Обновление 2. Я могу его исправить с помощью preventDefault:

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  e.preventDefault();
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){
    $(this).parent().removeClass('open');
  });
});

Ответы

Ответ 1

Это сложно, если вы не можете проверять элементы, но у меня есть подозрение, что ваша проблема может лежать в контейнере с классом "drowpdown-menu" (или какой бы элемент на самом деле не имел прикрепленную к нему полосу прокрутки, если она не выпадала) меню). Я не думаю, что проблема с вашим jQuery, но я бы попробовал добавить стиль для управления свойством переполнения. Попробуйте скрыть его, чтобы заставить окно выйти за пределы страницы. Главный свиток должен обрабатывать его оттуда. Однако с точки зрения UX я бы предостерег вас от создания меню с большим количеством вложенности, которое может привести к плохим результатам для конечного пользователя.

Ответ 2

$(document).ready(function(){
    $(".class-name").click(function(){
        $(".class-name").slideToggle(1000);//hear you can change value of slidetoggle i.e "slow","fast", or any number
    });
});