Chosen.js: 使用滑动效果实现下拉菜单的动画效果

Question

那么，chosen插件非常好用。有人知道如何在下拉选择框中添加一点效果，使其在点击时滑动打开/关闭，而不是无动画地弹出吗？

- Hassan

Answer 1

你的问题有解决方案。

CSS：

规则 .chosen-container

添加

display: none;

并且删除

left: -9999px;

现在我们需要绑定一些事件：

$('.chosen-select').on('chosen:showing_dropdown', function() {
    $(this).next('.chosen-container').children('.chosen-drop').slideDown(400);
}).on('chosen:hiding_dropdown', function () {
    $(this).next('.chosen-container').children('.chosen-drop').slideUp(400);
});

就是这些了！

- Rusher

---

很好的解决方法，但你需要像这样编辑chosen.css：查找： .chosen-container .chosen-drop {... 删除： left: -9999px; 添加： display: none;查找： .chosen-container.chosen-with-drop .chosen-drop {... 删除： left: 0; - Matija

Answer 2

Chosen并没有太多的API，所以我正在使用Select2，这是Chosen的一个更高级的后继者。从Chosen到Select2的语法转换相当简单。

这会让你接近目标，但是Select2在关闭时会隐藏搜索结果。你需要处理这个问题。

http://jsfiddle.net/isherwood/9WgAB/

$("#mySelect").select2().on('open',function(){
    $('.select2-drop').hide().slideDown();
}).on('close',function(){
    $('.select2-drop').show().slideUp();
});

- isherwood

---

哦，不知道Select2。会尝试你的建议并尽快在这里报告。 - Hassan

很棒的插件，但JSFiddle示例没有动画效果。目前在Safari和Chrome上测试。 - supertrue

该脚本不适用于较新版本的select2。 - TheCrazyProfessor