Question

实现选择列表下拉滚动条在单击IE时关闭下拉列表并在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');
}

具体化选择列表下拉滚动条

2 个答案: