单击 select 标记选项。 Bootstrap 弹出窗口关闭

Question

我不懂英文。很抱歉交换无意义的短语。

单击 Select 标记选项。 Bootstrap 弹出窗口关闭。

注意： mozilla firefox 浏览器问题。

// Bootstrap Popover
$('body').popover({
    selector: '[data-popover]',
    html: true,
    trigger: 'click hover',
    title: function() {
        return $('.select_box').html();
    },
    content: '...',
    placement: 'bottom',
    delay: {
        show: 50,
        hide: 400
    }
});

<button class='btn btn-primary' data-popover="true">hover here</button>


<div class="select_box hidden">
    <select class="form-control">
        <option>Day</option>
        <option>Week</option>
        <option>Month</option>
        <option>...</option>
    </select>
</div>

Answer 1

select 元素跨浏览器行为不一致，相关事件可以在不同时刻触发。

维护 jQuery 一种检查触发鼠标离开的当前目标是否为 select 的方法，如果是，则重新绑定 mouseleave 处理程序。

代码：

if (obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function () {
        //We entered the actual popover – call off the dogs
        clearTimeout(timeout);

        var bindLeave = function () {
            container.one('mouseleave', function (e) {
                if ($(e.target).is('select')) {
                    bindLeave();
                    return;
                }
                $.fn.popover.Constructor.prototype.leave.call(self, self);
            });
        }

        bindLeave();
    })
}

演示：http://jsfiddle.net/IrvinDominin/tskf0eoL/

单击 select 标记选项。 Bootstrap 弹出窗口关闭

Click the select tag option. Bootstrap popover closes

html

css

bugzilla

twitter-bootstrap

bootstrap-popover