那么,chosen插件非常好用。有人知道如何在下拉选择框中添加一点效果,使其在点击时滑动打开/关闭,而不是无动画地弹出吗?
你的问题有解决方案。
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);
});
就是这些了!
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();
});
.chosen-container .chosen-drop {...
删除:left: -9999px;
添加:display: none;
查找:.chosen-container.chosen-with-drop .chosen-drop {...
删除:left: 0;
- Matija