Question

我有一个Bootstrap Popovers的场景（版本2.3，虽然我也可以在3中重新创建问题），我在页面上有多个弹出窗口，我希望能够在打开新的弹出窗口时关闭任何打开的弹出窗口。

我拥有的方法（取自here）关闭打开的弹出窗口工作正常，直到我使用委托弹出对象的selector选项初始化我的弹出窗口。

这是JS：

// Works if popovers are instantiated this way
//$("[data-toggle=popover]").popover();

// Doesn't work if popovers are instantiated this way
var options = { selector: '[data-toggle=popover]' };

$(".container").popover(options)

$("[data-toggle=popover]").click(function() {
    $("[data-toggle=popover]").not(this).popover('hide');
});

HTML：

<div class="container">
    <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="Popover Title">Click to see my popover.</a>
    <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="Popover Title">Click to see my popover.</a>
</div>

Bootply example

我花了一些时间挖掘源代码，看看问题可能是什么，但我不确定如何解决这个问题。有没有人以前做过这样的工作？

更新

这确实有用 - $("[data-toggle=popover]").filter(this).popover('show'); - 我唯一关心的是来自popover库的这段代码：

function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.popover')
      var options = typeof option == 'object' && option

      if (!data && option == 'destroy') return
      if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

该行

if (!data) $this.data('bs.popover', (data = new Popover(this, options)))

当弹出窗口最初使用.container选项初始化时，

将数据属性添加到selector，但是当

时

$("[data-toggle=popover]").not(this).popover('hide');

被称为循环遍历与$("[data-toggle=popover]")选择器匹配的每个元素，并在它找到的每个元素上重新插入一个弹出窗口，忽略了一个事实，即popover对象已经添加到父容器并设置为通过使用选择器选项的委派。有什么方法可以避免这种情况吗？

Answer 1

最简单的 - 在我看来 - 最好的方法是使用<button>代替<a>，然后使用focus触发器。

var options = { selector: '[data-toggle=popover]', trigger: 'focus' };

$(".container").popover(options);



<div class="container">
    <button class="btn btn-large btn-danger" data-toggle="popover" title="" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="Popover Title">Click to see my popover.</button>
    <button class="btn btn-large btn-danger" data-toggle="popover" title="" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="Popover Title">Click to see my popover.</button>
</div>

这是bootply

如果您不想/不能更改锚点，可以尝试：

var options = { selector: '[data-toggle=popover]' };

$("body").popover(options)

$("[data-toggle=popover]").on('shown.bs.popover', function(e) {
  $(this).addClass('shown');
});

$("body").on('click', '[data-toggle=popover]', function(e) {
   $('.shown').not(this).popover('hide').removeClass('shown');
});

这是另一个bootply。

Answer 2

你的Javascript隐藏其他弹出窗口就好......但你忘了打开新的！

var options = { selector: '[data-toggle=popover]' };

$(".container").popover(options);

$("[data-toggle=popover]").click(function() {
    $("[data-toggle=popover]").not(this).popover('hide');
    $("[data-toggle=popover]").this.popover('show');
});

披露：我实际上并不知道我在做什么，但是当我检查Bootstrap文档并在Bootply中运行它时，它似乎会创建您正在寻找的行为。

Bootply

关闭通过委派创建的所有打开的Bootstrap弹出窗口

2 个答案: