Question

我正在尝试将一个下拉列表放在twitter bootstrap popover中。弹出窗口应该在链接的悬停事件上触发，并且当光标位于弹出窗口内时仍然可见。

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

尝试选择一个选项时，下拉列表会消失。

在Firefox中有机会通过键盘箭头选择，Chrome允许选择但在点击或输入时隐藏弹出框，在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

Appeared to be a known issue with Firefox and Chrome firing parent's "mouseleave" event when opening a dropdown. Just leaving it here for anybody having the same issue:

Thanks @Blocka and @gogobu for posting the solution here.

I've added e.target.tagName != 'OPTION' and e.target.tagName != 'FORM' conditions to original code because <form> and <option> elements fired "mouseleave" event too.

In my case the complete solution looks like this:

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 2

试试这个

$(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'); ..你需要让它活跃起来，如果你不想让它隐藏，所以把hide替换成活动的..你的悬停按钮将是活动的

Answer 3

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

var bot = new builder.UniversalBot(connector, function (session) {

    if (session.message && session.message.value) {
        // A Card's Submit Action obj was received
        processSubmitAction(session, session.message.value);
        return;
    }

    // Display Welcome card with Hotels and Flights search options
    // load Adaptive Card from JSON file
    var card = require('./card-hotels-flights-search.json');

    // send the card with form 
    var msg = new builder.Message(session).addAttachment(card);
    session.send(msg);
});

保持悬停触发的twitter bootstrap popover，同时从popover中的下拉列表中选择选项

3 个答案: