从弹出框内的下拉菜单中选择选项时，保持悬停触发的推特 bootstrap 弹出框处于活动状态

Question

我正在尝试在 Twitter bootstrap 弹出窗口中放置一个下拉列表。弹出窗口应在 link 的悬停事件上触发，并在光标位于弹出窗口内时保持可见。

我使用了来自 here 的 @vikas devde 发布的代码来使其工作，除了 select 从下拉列表中选择一个选项外，一切都很好。

当尝试 select 一个选项时，下拉菜单消失了。

在 Firefox 中，有机会 select 通过键盘箭头，Chrome 允许 select 但在单击或输入时隐藏弹出窗口，在 Safari 中一切正常。

这里有一个fiddle用于说明。

HTML:

<a id="hover-link" href="#">Hover over me</a>
<form id="form-popover" method="post">
    <label>Select some option here
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </label>
</form>

jQuery:

$(function () {
    $('#hover-link').popover({
                html: true,
                trigger: 'manual',
                placement: 'bottom',
                content: $('#form-popover').html(),
                title: "title"
            }).on("mouseenter", function () {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function () {
                    setTimeout(function () {
                        $(_this).popover('hide');
                    }, 100);
                });
            }).on("mouseleave", function () {
                var _this = this;
                setTimeout(function () {
                    if (!$(".popover:hover").length) {
                        $(_this).popover('hide');
                    }
                }, 100);
    });
});

Answer 1

试试这个

$(function () {
    $('#hover-link').popover({
                html: true,
                trigger: 'manual',
                placement: 'bottom',
                content: $('#form-popover').html(),
                title: "title"
            }).on("mouseenter", function () {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function () {
                    setTimeout(function () {
                        $(_this).popover('active');
                    }, 100);
                });
            }).on("mouseleave", function () {
                var _this = this;
                setTimeout(function () {
                    if (!$(".popover:hover").length) {
                        $(_this).popover('hide');
                    }
                }, 100);
    });
});

这就是问题所在 $(_this).popover('hide'); ..如果您不想隐藏它，则需要将其激活，因此将隐藏替换为活动..您的悬停按钮将处于活动状态

Answer 2

似乎是 Firefox 的一个已知问题，Chrome 在打开下拉菜单时触发 parent 的 "mouseleave" 事件。把它留在这里给有同样问题的人：

感谢@Blocka 和@gogobu 发布解决方案here。

我在原始代码中添加了 e.target.tagName != 'OPTION' 和 e.target.tagName != 'FORM' 条件，因为 <form> 和 <option> 元素也触发了 "mouseleave" 事件。

就我而言，完整的解决方案如下所示：

jsfiddle

jQuery:

$(function () {
    $('#hover-link').popover({
        html: true,
        trigger: 'manual',
        placement: 'bottom',
        content: $('#form-popover').html(),
        title: "title"
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function (e) {
            // e.fromElement and e.target.tagName hack to manage firing .popover "mouseleave" event when dropdown is open on Firefox and Chrome
            if ((typeof e.fromElement != 'undefined' && !e.fromElement.length) || (typeof e.fromElement == 'undefined' && e.target.tagName != 'SELECT' && e.target.tagName != 'OPTION' && e.target.tagName != 'FORM')) {
                setTimeout(function () {
                    $(_this).popover('hide');
                }, 100);
            }
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover('hide');
            }
        }, 100);
    });
});

Answer 3

显然，Firefox 允许点击事件传播到弹出窗口，导致弹出窗口消失。所以，也许这是一种更简单、更直接的方法，因为 "active" 不是 Bootstrap 弹出窗口的文档化函数。

$(document).on('click','select.popover-specific-select-element',function(event){
    // Hack to make sure the popover stays open when using Firefox.
    event.stopPropagation();
});

从弹出框内的下拉菜单中选择选项时，保持悬停触发的推特 bootstrap 弹出框处于活动状态

Keep hover-triggered twitter bootstrap popover alive while selecting option from a dropdown inside the popover

jquery

twitter-bootstrap

drop-down-menu

popover