javascript - 使 Bootstrap Popover 可点击/SetTimeout 使用

Question

我试图让 bootstrap 的“弹出窗口”可点击，因为当我将鼠标悬停在其中时它会保持打开状态。

我已经设法让这个与这个脚本一起工作 http://jsfiddle.net/CtuRx/5/ .

但是当我通过 jslint 运行它时，它会提示在定义之前使用了 settimeout。

想知道是否有人可以提供/解释更好的解决方案来创建和使用一个函数 - 在原始 .btn 类和 .popover 的鼠标离开上定义和调用 settimeout 延迟。

谢谢!

Answer 1

Here's an alternate solution .

我将您的按钮包裹在 div 中。

当鼠标进入 wrapper div 时，它会显示 popover 并展开自身，为鼠标进入 popover 提供一个桥梁，而不会触发 mouseleave。我们还在弹出窗口上放置了一个 mouseleave，以便当我们离开弹出窗口时包装器 div 返回到其默认宽度。

links.mouseenter(function (event) {

    var link = $(this);
    link.popover('show').width(180);

    $('.popover').mouseleave(function () {
        link.popover('hide').width(defaultWidth);
    });   
});

当鼠标离开按钮并进入到弹出窗口的桥时，我注意到 mouseleave 事件由于事件冒泡而在包装器上触发。下面的代码通过忽略鼠标事件来解决这个问题，除非我们退出主体的包装器。

links.mouseleave(function (event) {
    if (event.toElement === document.body) {
        $(this).popover('hide').width(defaultWidth);
    }           
});

尝试向包装器 div 添加边框以查看代码的运行情况。还。您应该考虑分隔 CSS 以使其更具可读性。