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

Ответ 1

Если вы обновляетесь до Bootstrap 3 (BS3), они открыли много событий Javascript, которые хороши для привязки нужной вам функциональности. В BS3 этот код предоставит всем раскрывающимся меню эффект анимации, который вы ищете:

  // Add slideDown animation to Bootstrap dropdown when expanding.
  $('.dropdown').on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // Add slideUp animation to Bootstrap dropdown when collapsing.
  $('.dropdown').on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

Вы можете прочитать о событиях BS3 здесь и, в частности, о выпадающих событиях здесь.

Ответ 2

Также можно избежать использования 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 { /* For Bootstrap 4, use .dropdown.show instead of .dropdown.open */
    max-height: 300px;
    opacity: 1;
}

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

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

Вот небольшой пример: ДЕМО

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

Ответ 3

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

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

Ответ 4

Я не знаю, смогу ли я поднять этот поток, но я нашел быстрое решение для визуальной ошибки, которая возникает, когда открытый класс удаляется слишком быстро. По сути, все, что нужно сделать, это добавить функцию 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('show');
            $('.dropdown-menu').removeClass('show');
            $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
        });
    });
});

Ответ 5

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

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

Ответ 6

В щелчке это можно сделать, используя код ниже

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

Ответ 7

Я использую код выше, но я изменил эффект задержки методом 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)
    });

Ответ 8

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

В 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 можно задать любое большое значение, достаточное для размещения раскрывающегося содержимого.

Ответ 9

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

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

Шаг 1: Добавьте animate.css на свою страницу с тегами заголовка:

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

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

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

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

Шаг 3: Затем добавьте два атрибута пользовательских данных в элемент меню dropdrop; data-drop-in для анимации и выпадающего списка данных для анимации out. Это могут быть любые эффекты animate.css, такие как fadeIn или fadeOut

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

Шаг 4:. Затем добавьте следующий Javascript, чтобы прочитать атрибуты данных выпадающего меню/выхода и реагировать на крючки/события Bootstrap Javascript API (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

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

Ответ 10

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

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

Я просто изменил .slideToggle на .slideDown и .slideUp и удалил (400) timing

Ответ 11

BOOTSTRAP 3 ССЫЛКА

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

По сути, раскрывающийся список 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');
  });
});

Ответ 12

Вот хорошее простое решение, использующее jQuery, которое прекрасно работает:

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

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

Переключение слайд-анимации происходит при нажатии и всегда ускоряется при проигрывании фокуса.

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

Edit:

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

Ответ 13

В Bootstrap 3 этот вариант ответов выше делает slideUp() mobile slideUp() более плавной; Ответы выше содержат прерывистую анимацию, поскольку Bootstrap .open удаляет класс .open из родительского .open -переключателя, поэтому этот код восстанавливает класс до тех пор, пока не slideUp() анимация slideUp().

// Add animations to topnav dropdowns
// based on https://stackoverflow.com/a/19339162
// and https://stackoverflow.com/a/52231970

$('.dropdown')
  .on('show.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
  })
  .on('hide.bs.dropdown', function() {
    $(this).find('.dropdown-menu').first().stop(true, false).slideUp(300, function() {
      $(this).parent().removeClass('open');
    });
  })
  .on('hidden.bs.dropdown', function() {
    $(this).addClass('open');
  });

Ключевые отличия:

• В hide.bs.dropdown события hide.bs.dropdown я использую .stop() умолчанию .stop() (false) для второго аргумента (jumpToEnd)
• hidden.bs.dropdown события hidden.bs.dropdown восстанавливает класс .open для родительского .open -переключателя выпадающего .open и делает это практически сразу после того, как класс был впервые удален. Тем временем slideUp() все еще работает, и, как и в ответах выше, ее обратный вызов "анимация завершена" отвечает за окончательное удаление класса .open из его родителя.
• Методы связаны друг с другом, потому что селектор для каждого обработчика событий одинаков