物化选择列表下拉滚动条在 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 在 GitHub 的存储库问题页面上发布了 solution：

将整个$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');
});

Answer 2

找到了解决办法。添加以下行对我有用，

$('.select-dropdown').find('span').on('click',function(){
 $newSelect.trigger('close');  
});


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