Question

我正在尝试使bootstrap的'popover'可点击，因为当我将鼠标悬停在它中时它会保持打开状态。

我已成功使用此脚本http://jsfiddle.net/CtuRx/5/。

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

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

谢谢！

Answer 1

Here's an alternate solution

我把你的按钮包裹在div中。

当鼠标进入包装器div时，它会显示弹出框并展开自身，以便为鼠标提供一个桥接，以便在不触发鼠标提取的情况下进入弹出窗口。我们还在弹出窗口上放置了一个mouseleave，以便当我们离开popover时，包装器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分开以使其更具可读性。

使Bootstrap Popover Clickable / SetTimeout使用

1 个答案: