Добавление эффекта скольжения для начальной загрузки выпадающего

также можно избежать использования JavaScript для выпадающего эффекта и использовать переход CSS3, добавив этот небольшой фрагмент кода в свой стиль:

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

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

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

единственная проблема с этим способом заключается в том, что вы должны вручную задать максимальную высоту. Если вы установите очень большое значение, ваша анимация будет очень быстрой.

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

вот небольшой пример:демо

---

! В этом решении есть небольшая ошибка с заполнением, проверьте комментарий Якоба штамма с решением.

Я делаю что-то подобное, но при наведении на кнопку.. Это код, который я использую, вы можете немного настроить его, чтобы заставить его работать на click

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});

Я не знаю, Могу ли я поднять эту тему, но я выяснил быстрое исправление визуальной ошибки, которая происходит, когда открытый класс удаляется слишком быстро. В принципе, все, что нужно для этого, это добавить функцию OnComplete внутри события slideUp и сбросить все активные классы и атрибуты. Идет что-то вроде этого:

вот результат: Bootply пример

Javascript/Jquery:

$(function(){
    // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
    $('.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(){
            //On Complete, we reset all active dropdown classes and attributes
            //This fixes the visual bug associated with the open class being removed too fast
            $('.dropdown').removeClass('open');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});

вот мое решение для слайд и исчезают эффект:

   // Add slideup & fadein animation to dropdown
   $('.dropdown').on('show.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
         $(this).css({'margin-top':''});
      });
   });
   // Add slidedown & fadeout animation to dropdown
   $('.dropdown').on('hide.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
         $(this).css({'margin-top':'', display:''});
      });
   });

по щелчку это можно сделать с помощью кода ниже

$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown-menu').slideToggle(500);
});

Я использую код выше, но я изменил эффект задержки slideToggle.

он скользит выпадающее меню при наведении курсора с анимацией.

$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400);
    }, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400)
    });

расширенный ответ, был моим первым ответом, поэтому извините, если раньше не было достаточно деталей.

Для Bootstrap 3.x лично я предпочитаю CSS-анимации, и я использую animate.CSS и наряду с начальной загрузки выпадающего JavaScript на крючки. Хотя это может не иметь того эффекта, который вы ищете, это довольно гибкий подход.

Шаг 1: добавить анимировать.css на вашу страницу с тегами head:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

Шаг 2: использовать стандартный Bootstrap HTML на триггере:

<div class="dropdown">
  <button type="button" data-toggle="dropdown">Dropdown trigger</button>

  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Шаг 3: затем добавить 2 пользовательские атрибуты данных в dropdrop-меню элемента; сведения-в выпадающем списке-в ДЛЯ в анимации и данных-выпадающий-аут для анимации. Они могут быть любыми одушевленными.css эффекты, такие как fadeIn или fadeOut

<ul class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
......
</ul>

Шаг 4: затем добавьте следующий Javascript, чтобы прочитать атрибуты данных выпадающего списка и реагировать на загрузочный Javascript API hooks / events (http://getbootstrap.com/javascript/#dropdowns-events):

var dropdownSelectors = $('.dropdown, .dropup');

// Custom function to read dropdown data
// =========================
function dropdownEffectData(target) {
  // @todo - page level global?
  var effectInDefault = null,
      effectOutDefault = null;
  var dropdown = $(target),
      dropdownMenu = $('.dropdown-menu', target);
  var parentUl = dropdown.parents('ul.nav'); 

  // If parent is ul.nav allow global effect settings
  if (parentUl.size() > 0) {
    effectInDefault = parentUl.data('dropdown-in') || null;
    effectOutDefault = parentUl.data('dropdown-out') || null;
  }

  return {
    target:       target,
    dropdown:     dropdown,
    dropdownMenu: dropdownMenu,
    effectIn:     dropdownMenu.data('dropdown-in') || effectInDefault,
    effectOut:    dropdownMenu.data('dropdown-out') || effectOutDefault,  
  };
}

// Custom function to start effect (in or out)
// =========================
function dropdownEffectStart(data, effectToStart) {
  if (effectToStart) {
    data.dropdown.addClass('dropdown-animating');
    data.dropdownMenu.addClass('animated');
    data.dropdownMenu.addClass(effectToStart);    
  }
}

// Custom function to read when animation is over
// =========================
function dropdownEffectEnd(data, callbackFunc) {
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  data.dropdown.one(animationEnd, function() {
    data.dropdown.removeClass('dropdown-animating');
    data.dropdownMenu.removeClass('animated');
    data.dropdownMenu.removeClass(data.effectIn);
    data.dropdownMenu.removeClass(data.effectOut);

    // Custom callback option, used to remove open class in out effect
    if(typeof callbackFunc == 'function'){
      callbackFunc();
    }
  });
}

// Bootstrap API hooks
// =========================
dropdownSelectors.on({
  "show.bs.dropdown": function () {
    // On show, start in effect
    var dropdown = dropdownEffectData(this);
    dropdownEffectStart(dropdown, dropdown.effectIn);
  },
  "shown.bs.dropdown": function () {
    // On shown, remove in effect once complete
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectIn && dropdown.effectOut) {
      dropdownEffectEnd(dropdown, function() {}); 
    }
  },  
  "hide.bs.dropdown":  function(e) {
    // On hide, start out effect
    var dropdown = dropdownEffectData(this);
    if (dropdown.effectOut) {
      e.preventDefault();   
      dropdownEffectStart(dropdown, dropdown.effectOut);   
      dropdownEffectEnd(dropdown, function() {
        dropdown.dropdown.removeClass('open');
      }); 
    }    
  }, 
});

Шаг 5 (необязательный): если вы хотите ускорить или изменить анимацию, вы можете сделать это с помощью CSS следующим образом:

.dropdown-menu.animated {
  /* Speed up animations */
  -webkit-animation-duration: 0.55s;
  animation-duration: 0.55s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

написал статью с более подробной информацией и скачать, если кого интересует: статья: http://bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss

надеюсь, что это полезно и эта вторая запись имеет уровень детали, которые необходимы Том

$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
}, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

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

Я только что изменил .slideToggle to .slideDown & .slideUp и удалены (400) времени

BOOTSTRAP 3 REFERENCE

добавлено, потому что я продолжаю попадаться на решение в этой теме, и это наполняет меня каждый раз.

в основном выпадающее меню BS немедленно удаляет .open класс от родителя, поэтому скольжение вверх не работает.

используйте тот же бит, что и другие решения для slideDown ();

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

вот хорошее простое решение с помощью jQuery это работает:

$('.dropdown-toggle').click(function () {
    $(this).next('.dropdown-menu').slideToggle(300);
});

$('.dropdown-toggle').focusout(function () {
    $(this).next('.dropdown-menu').slideUp(300);
})

переключение анимации слайдов происходит при нажатии, и он всегда скользит вверх при потере фокуса.

изменить 300 значение все, что вы хотите, чем меньше число, тем быстрее анимация.

Edit:

Это решение будет работать только на вид рабочего стола. Он будет нуждаться в некоторых дополнительных модификациях для того, чтобы хорошо отображаться для мобильных устройств.

Обновление 2018 Bootstrap 4

в Boostrap 4, в .open класс был заменен на .show. Я хотел реализовать это, используя только CSS-транзисторы без необходимости дополнительного JS или jQuery...

.show > .dropdown-menu {
  max-height: 900px;
  visibility: visible;
}

.dropdown-menu {
  display: block;
  max-height: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

демо: https://www.codeply.com/go/3i8LzYVfMF

Примечание: max-height может быть установлено любое большое значение, которое достаточно для размещения выпадающего содержимого.