如何滑动Selectize.js下拉菜单？

harrison4 发表于 Dev

哈里森4

我正在使用很棒的Selectize.js插件，并且尝试使用jQuery打开下拉菜单时添加一个简单的幻灯片动画。而且我还将位置更改为静态。

我改变了这个：

/**
* Shows the autocomplete dropdown containing
* the available options.
*/
open: function() {
  var self = this;

  if (self.isLocked || self.isOpen || (self.settings.mode === 'multi' && self.isFull())) return;
  self.focus(true);
  self.isOpen = true;
  self.refreshClasses();
  self.$dropdown.css({visibility: 'hidden', display: 'block'});
  self.positionDropdown();
  self.$dropdown.css({visibility: 'visible'});
  self.trigger('dropdown_open', this.$dropdown);
},

/**
* Closes the autocomplete dropdown menu.
*/
close: function() {
  var self = this;

  if (!self.isOpen) return;
  self.$dropdown.hide();
  self.setActiveOption(null);
  self.isOpen = false;
  self.refreshClasses();
  self.trigger('dropdown_close', self.$dropdown);
},

这样：

/**
* Shows the autocomplete dropdown containing
* the available options.
*/
open: function() {
  var self = this;

  if (self.isLocked || self.isOpen || (self.settings.mode === 'multi' && self.isFull())) return;
  self.focus(true);
  self.isOpen = true;
  self.refreshClasses();
  self.$dropdown.slideDown();
  self.positionDropdown();
  self.trigger('dropdown_open', this.$dropdown);
},

/**
* Closes the autocomplete dropdown menu.
*/
close: function() {
  var self = this;

  if (!self.isOpen) return;
  self.$dropdown.slideUp();
  self.setActiveOption(null);
  self.isOpen = false;
  self.refreshClasses();
  self.trigger('dropdown_close', self.$dropdown);
},

好了，正如您所看到的，恐怕它无法正确打开，并且在您关闭它时也不会执行幻灯片动画……任何人都有更好的主意吗？

任何建议，技巧或帮助将不胜感激，如果您需要更多信息，我将编辑该帖子。

欧文·多米宁（Irvin Dominin）

如果没有对插件代码的任何变化，你可以尝试使用事件onDropdownOpen和onDropdownClose并强制动画。

这有点hacky，但是可以用。

码：

$(document).ready(function () {
    $('#sel').selectize({
        create: false,
        sortField: 'text',
        onDropdownOpen: function () {
            $(".selectize-dropdown").hide().slideToggle();
        },
        onDropdownClose: function () {
            $(".selectize-dropdown").show().slideToggle();
        }
    });
});

演示：http：//jsfiddle.net/IrvinDominin/cHxcZ/

编辑

在以前的版本中，当您尝试再次按下输入以将其关闭时，存在一个问题，使用解决stop。

参考：

在元素上调用.stop（）时，当前正在运行的动画（如果有）立即停止。例如，如果在调用.stop（）时使用.slideUp（）隐藏某个元素，则该元素现在仍会显示，但只是其先前高度的一小部分。不调用回调函数。

如果在同一元素上调用了多个动画方法，则以后的动画将放置在该元素的效果队列中。在第一个动画完成之前，这些动画将不会开始。调用.stop（）时，队列中的下一个动画立即开始。如果clearQueue参数的值为true，则队列中的其余动画将被删除并且永远不会运行。

码：

$(document).ready(function () {
    $('#sel').selectize({
        create: false,
        sortField: 'text',
        onDropdownOpen: function ($dropdown) {
            $dropdown.stop().hide().slideToggle();
        },
        onDropdownClose: function ($dropdown) {
            $dropdown.stop().show().slideToggle();
        }
    });
});

演示：http：//jsfiddle.net/IrvinDominin/cHxcZ/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。