javascript - Materialise 选择列表下拉滚动条在 IE 上无法正常工作

Question

点击 IE 上的滚动条时，Materialize 选择列表下拉列表会关闭，但在 Chrome 中工作正常。

我在网上查了一些解决方案，下面的代码帮助我在 IE 中工作:

//Hiding the below lines in js

$newSelect.on('blur', function() {
    if (!multiple) {
      $(this).trigger('close');
    }
    options.find('li.selected').removeClass('selected');
  });

但此后，当未选择任何选项时(单击屏幕时)，下拉列表不会关闭。

有人可以帮我想出关闭该下拉菜单的办法吗？

提前致谢。

Answer 1

Fasani发布了solution在 GitHub 上的存储库问题页面上:

将整个 $newSelect.on("blur", function() { ... } 函数替换为

$newSelect.on("blur", function() {
  var that = this;

  $(this).find(' ~ .dropdown-content span').off('click');
  $(this).find(' ~ .dropdown-content span').on('click', function() {
    $(that).trigger('close');
  });

  var containers = $(".select-dropdown");
  if (!multiple && !containers.is(e.target)) {
    $(this).trigger("close");
  }

  options.find("li.selected").removeClass("selected");
});

不幸的是，这个解决方案有一个缺点，即只有选择一个选项时下拉列表才会关闭(如果用户单击下拉列表之外则不会关闭)。就我个人而言，我认为这是值得的。

如果您想将此“缺点”仅限于 IE，您可以添加如下条件(基于 this stackoverflow page ):

var isIE = function() {
    var msie = window.document.documentMode;
    if (msie <= 11) return true;
    else return false;
}

$newSelect.on('blur', function() {
    if (isIE()){
        var that = this;

        $(this).find(' ~ .dropdown-content span').off('click');
        $(this).find(' ~ .dropdown-content span').on('click', function() {
            $(that).trigger('close');
        });

        var containers = $(".select-dropdown");
        if (!multiple && !containers.is(e.target)) {
            $(this).trigger("close");
        }

    } else {
        if (!multiple) {
            $(this).trigger('close');
        }
    }

    options.find('li.selected').removeClass('selected');
});