Select2 - 在悬停时打开下拉列表

问题描述 投票:0回答:0

我希望我的 Select2 下拉菜单在我悬停在下拉按钮/下拉选项上时打开,并在我不再悬停在下拉按钮/下拉选项上时关闭。

悬停打开效果很好:

$(document).on('mouseenter', '.select2-container, .select2-results', function(e) {
        $(this).prev("select").select2("open");

不悬停时关闭是我正在努力解决的问题。它要么在鼠标离开下拉按钮时保持打开状态,要么在每次鼠标离开下拉按钮时关闭,即使它位于下拉选项中。

例如,当鼠标不再位于下拉选项上时关闭,但如果鼠标通过下拉按钮离开则不会关闭。

$(document).on('mouseleave', '.select2-container .select2-dropdown', function(e) {
    var selectId = $(this).find("ul").attr('id').replace("select2-", "").replace("-results", "");
    $("#"+selectId).select2("close");
});

尝试 2:每次鼠标离开下拉按钮时都会关闭,即使它在下拉选项上也是如此。

  $(document).on('mouseleave', '.select2-container, .select2-results', function(e) {
    var target = $(e.target);
    var container = $(this);
    var isInsideContainer = container.is(e.relatedTarget) || container.has(e.relatedTarget).length > 0;
    if (!isInsideContainer && !target.hasClass("select2-search__field") && !target.hasClass("select2-search__clear") && !target.hasClass("select2-selection__choice")) {
      $(this).prev("select").select2("close");
    }
  });

我在 nw.js 应用程序(即基于 Chromium 的应用程序)中使用 Select2 4.0.13。

谢谢!

jquery-select2
© www.soinside.com 2019 - 2024. All rights reserved.