在 Bootstrap 弹出框显示之前执行函数？

Question

我最近开始使用Twitter的新Bootstrap 2.0.1和它的Javascript弹出框。

我想编写一个脚本，以便在任何时候最多只能显示一个弹出框。换句话说，当出于任何原因（例如客户单击或将鼠标悬停在带有弹出框的新元素上）生成新的弹出框时，首先隐藏所有之前显示的弹出框。

以下是最初为我的网页设置所有弹出框的函数：

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

我想需要的是编写一个隐藏所有弹出窗口的函数。在显示每个弹出窗口之前，我会调用该函数，以确保一次只显示一个弹出窗口。我想这个函数可能是这样的：

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

但是我的问题是找不到在哪里或者如何调用这个 hidePopovers 函数。我想在弹出浮层之前调用它。帮忙一下吗？

另外，为了消除任何可能的困惑，新版的 Bootstrap 现在有一个“点击”触发器，允许您在单击时显示浮层。可以在此处找到更多详细信息。

非常感谢！

- ryzh

Answer 1

考虑到你提出的问题，我认为比起在页面上选择每个弹出框元素并执行隐藏方法，更高效的方法是简单地存储对最后一个打开的弹出框的引用。据我所理解，你只想要一个弹出框被打开，所以最多只会有一个需要隐藏。

以下代码可以解决问题：

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化DOM元素来优化了代码。}

- merv

---

我在寻找类似的东西时偶然发现了这个，它完成了工作 - 谢谢 +1 - Jon Clements

Answer 2

尚未测试，但类似以下代码可能有效：

将触发器设置为手动。 监听点击事件，当点击时调用hidePopovers()，然后显示所点击的弹出窗口。

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

- msc