Chosen.js:使用幻灯片效果设置下拉菜单的动画

Question

所以，chosen插件很棒。有人知道如何在下拉选择框中添加一点效果，使其在单击时滑下/滑升，而不是在没有动画的情况下弹出吗？

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

就这样!

Answer 2

advanced没有太多的应用程序接口，所以我正在使用Select2，它是advanced的一个更高级的继任者。从Select2到Select2的语法切换相当简单。

这会关闭搜索结果，但Select2会在关闭时隐藏搜索结果。你得处理好这件事。

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

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