3

我最近开始使用 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 现在有一个“点击”触发器，允许您在点击时显示弹出框。可以在此处找到有关它的更多详细信息。

非常感谢！

4

2 回答 2

9

考虑到您提出的要解决的问题，我认为简单地存储对上次打开的弹出框的引用会更有效，而不是在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 化的 DOM 元素，对代码进行了一些优化。

于 2012-08-25T06:28:03.067 回答
1

尚未对此进行测试，但类似这样的方法可能有效：

将触发器设置为手动。监听点击事件并在点击时调用 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');});
});
于 2012-08-24T21:27:57.770 回答