Question

因此，对于常规引导下拉菜单，我想自定义它，以便它具有滑动动画并同时水平显示。我找到了the former的解决方案：

// 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){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

和the latter：

.dropdown-menu > li{
  display: inline-block;
  float:left;
}
.open> ul {
  display: inline-flex !important;
}

但是当我尝试将两个解决方案things went wrong组合在一起时。

在打开抽屉时动画发生的毫秒数，菜单的高度应大于应有的高度，同样，关闭抽屉时下拉菜单的宽度会缩小。似乎这应该在覆盖某个高度后轻松解决，但我不确定这究竟是什么类。在任何情况下，甚至可以在同一个抽屉上同时使用这两个功能吗？

Answer 1

对于高度：您可以使用max-height覆盖css中的高度。

问题，为什么下拉菜单在完全关闭之前收缩是display的引导程序的css类，它在触发滑动操作之前就已经呈现。解决方法是手动将显示样式覆盖为display: inline flex（就像菜单打开时一样）。

您可以找到更新的小提琴here。

我希望这会有所帮助......

具有滑动动画的Bootstrap水平下拉菜单

1 个答案: