javascript - Chosen.js：使用幻灯片效果为下拉菜单设置动画

Question

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

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

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