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现在有一个“点击”触发器，允许您在点击时显示弹出窗口。 More details about it can be found here

非常感谢你！

Answer 1

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

以下是诀窍：

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

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');});
});

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

2 个答案:

JSFiddle

JSFiddle