在显示Bootstrap popover之前执行功能？

Question

我最近开始使用Twitter的新Bootstrap 2.0.1及其Javascript弹出窗口.

我想编写一个脚本,以便一次只能显示一个popover.换句话说,当出于任何原因生成新的弹出窗口时(例如,客户端点击或悬停在带有弹出窗口的新元素上),所有先前显示的弹出窗口都将被隐藏.

这是最初为我的网页设置所有弹出窗口的功能:

$(function (){
    $("[rel=popover]").popover({placement:'left', trigger:'click', html:true});
});

我认为,我需要的是编写一个隐藏所有弹出窗口的函数.我会在显示每个弹出框之前调用该函数,以确保一次只显示一个弹出窗口.我想这个函数看起来像这样:

function hidePopovers(){
    $(function (){
        $("[rel=popover]").popover('hide');
    });
}

但我的问题是找出WHERE(或HOW)来调用这个hidePopovers函数.我想在触发弹出窗口时调用它,但是在显示弹出窗口之前.救命？

哦,只是为了消除任何困惑,新的Bootstrap现在有一个"点击"触发器,允许您在点击时显示弹出窗口.有关它的更多细节可以在这里找到.

非常感谢!

Answer 1

考虑到你要解决的问题,我认为简单地存储对最后一个popover的引用会更有效,而不是hide()在你可能在页面上选择的每个popover元素上执行该方法.据我所知,你只需要一个弹出窗口首先打开,所以最多只能隐藏一个弹出窗口.

以下是诀窍:

var $visiblePopover;

$('body').on('click', '[rel="popover"]', function() {
  var $this = $(this);

  // check if the one clicked is now shown
  if ($this.data('popover').tip().hasClass('in')) {

    // if another was showing, hide it
    $visiblePopover && $visiblePopover.popover('hide');

    // then store reference to current popover
    $visiblePopover = $this;

  } else { // if it was hidden, then nothing must be showing
    $visiblePopover = '';
  }
});?

的jsfiddle

从技术上讲,您可能会将委托处理程序附加的选择器(在使用示例代码'body'中)更改为页面的更具体的元素,从而允许您将一次只能看到一次的行为附加到仅页面上的弹出窗口的子集.

例如,如果您有一个特定的表单,其中弹出框会显得太近,但页面上的其他弹出窗口不会碰撞/重叠,您可以只选择表单(例如'#some_form_id'),只有表单中的弹出窗口会有行为.

的jsfiddle

_{注意:在后一个例子中,我还通过将存储的引用更改为仅使用实际的Popover对象而不是它所附加的jQuery-ized DOM元素来优化代码.}