twitter bootstrap 2.2.1 popover nav不会停留在悬停状态

时间:2012-12-12 04:29:26

标签: jquery twitter-bootstrap

是否有一种简单的方法可以让你在twitter boostrap 2.2.1中使用popover功能时它会在悬停触发时保持激活状态?我问的原因是因为我有一个链接菜单我希望能够点击,而不必通过点击触发,因为点击该元素也应该做的事情。

一个例子是WordPress,管理面板在导航栏中有一系列图标,当我将鼠标悬停在它们上面时,我会看到如下所示的悬停弹出窗口:

enter image description here

从图像中你可以看到我徘徊在一个图标上有一个下拉。我无法进行点击事件,因为这会破坏图标在崩溃状态下的主要功能。

我使用的代码是:

jQuery('#adminmenu li.wp-not-current-submenu.wp-has-submenu, .folded #adminmenu li.wp-has-submenu').popover({       
    html: true,
    title: function() {
        var title = jQuery(this).find('a.menu-top').html();
        return title;
    },
    content: function() {
        var submenu = jQuery(this).find('.wp-submenu').html();
        return submenu;
    },
    placement: 'right',
    trigger: 'hover',
});

2 个答案:

答案 0 :(得分:0)

解决方案 - 使用旧版本的bootstrap

答案 1 :(得分:0)

如果您希望在悬停时触发弹出窗口并在您将鼠标悬停在弹出窗口上时保持可见,则可以使用“容器”选项让Bootstrap将弹出窗口附加到目标元素。这样,popover就是目标元素的一部分,你不会徘徊。

您需要为每个图标添加HTML ID并使用:

container: "#the-icon-id"

这也意味着你对每个元素都有一个“popover”调用而不是像你在这里那样使用选择器(我不知道是否有一个“容器”值可以通用方式工作)

请参阅http://twitter.github.io/bootstrap/javascript.html#popovers