Javascript 在显示Bootstrap popover之前执行函数?

Javascript 在显示Bootstrap popover之前执行函数?,javascript,jquery,function,twitter-bootstrap,popover,Javascript,Jquery,Function,Twitter Bootstrap,Popover,我最近开始使用Twitter新的Bootstrap 2.0.1及其Javascript弹出窗口 我想写一个脚本,这样一次最多只能显示一个popover。换句话说,无论出于何种原因(例如,客户端单击或将鼠标悬停在具有popover的新元素上)生成新的popover时,所有先前显示的popover都将首先隐藏 以下是最初为我的网页设置所有弹出窗口的功能: $(function (){ $("[rel=popover]").popover({placement:'left', trigger:

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

我想写一个脚本,这样一次最多只能显示一个popover。换句话说,无论出于何种原因(例如,客户端单击或将鼠标悬停在具有popover的新元素上)生成新的popover时,所有先前显示的popover都将首先隐藏

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

$(function (){
    $("[rel=popover]").popover({placement:'left', trigger:'click', html:true});
});
我想,我需要的是编写一个隐藏所有弹出窗口的函数。我会在显示每个popover之前调用该函数,以确保一次只显示一个popover。我想函数可能是这样的:

function hidePopovers(){
    $(function (){
        $("[rel=popover]").popover('hide');
    });
}
但我的问题是要弄清楚在哪里(或如何)调用这个hidepovers函数。我想在触发popover时,但在显示popover之前调用它。帮忙

哦,为了消除任何混乱,新的引导现在有一个“点击”触发器,允许您在点击时显示弹出框


非常感谢你

尚未对此进行测试,但类似的方法可能会奏效:

将触发器设置为手动。 侦听单击事件,单击时调用hidepovers(),然后显示单击的弹出窗口

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

考虑到要解决的问题,我认为简单地存储对上次打开的popover的引用,而不是对页面上可能选择的每个popover元素执行
hide()
方法,效率会更高。据我所知,你一开始只想打开一个popover,所以最多只能隐藏一个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 = '';
  }
});​
从技术上讲,您可能会将委托处理程序附加的选择器(在示例代码中使用了“body”)更改为页面的更具体元素,从而允许您将每次仅一次可见的行为附加到页面上的弹出框的子集

例如,如果您有一个特定的表单,其中的弹出窗口显示得太近,但页面上的其他弹出窗口不会发生碰撞/重叠,那么您可以只选择该表单(例如,
“#某个表单id”
),并且只有表单中的弹出窗口才会有该行为


注意:在后一个示例中,我还对代码进行了一些优化,将存储的引用更改为仅使用实际的Popover对象,而不是它所附加的jQuery-ized DOM元素。

我只是在寻找类似内容时遇到了这个问题,这就完成了任务-干杯+1