Question

我花了几个小时来弄清楚JavaScript函数或CSS3规则在This Demo中实现了平滑的Dropdown功能，但我无法确定它。

然后我尝试将自己的slideToggle创建为：

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

这不如上面提到的演示一样好，并且它有一些问题因为它只是向下滑动.dropdown-menu只有用户点击.selectopt的顶部并且它没有＆＃ 39;关心失去焦点或选择的选项！考虑到所有这些，请告诉我在演示中.dropdown-menu的流畅幻灯片和淡入淡出的演示是什么？感谢

Answer 1

它＆＃34;花式＆＃34;使用0.25s的过渡衰落。上 dropdown-menu类。

您提到的演示正在使用外部资源

enter image description here

查看代码

$("select[name='herolist']").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});

您可以看到它使用来自Bootstrap select plugin的.selectpicker()。传递的对象{style: 'btn-primary', menuStyle: 'dropdown-inverse'}仅包含用于设置Flat UI CSS中包含的下拉菜单样式的css类。执行代码时，基础HTML将更改为

enter image description here

班级dropdown-menu包含以下规则

.dropdown-menu {
  background-color: #f3f4f5;
  border: none;
  display: block;
  margin-top: 8px;
  opacity: 0;
  padding: 0;
  visibility: hidden;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

结论：它的幻想＆＃34;使用0.25s的过渡衰落。

Answer 2

小提琴中有一大堆外部资源：

bootstrap.min.css
bootstrap.min.js
平ui.css
自举-select.min.css
自举-select.js

据我所知，flat-ui.css是造成这种幻想的原因。

我建议您从小提琴中添加所有外部资源，当您完成下拉菜单时，请尝试删除每个资源以查看是否有任何资源未被使用。在小提琴中，他们都被重新征服。

Bootstrap 3 Dropdown Animate / Easing

2 个答案: