显示一个弹出窗口并隐藏其他弹出窗口

Question

我有几个按钮,我需要一个弹出窗口.
我想要这样:
当我的用户点击其中一个时,我希望其他人被隐藏.所以只显示一个popover
检查并帮我纠正这个例子plz:

var mycontent='<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'

$('.btn').popover({
    html: true,
    content:mycontent,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

$('html').click(function(e) {
     $('.btn').popover('hide');
});

我的HTML:

<ul>
    <li>
        <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>
    </li>
    <li>
       <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a> 
    </li>
</ul>

jsfiddle的例子

添加类似代码的东西以某种方式解决了我的问题:

$('.btn').click(function(e) {
     $('.btn').popover('hide');
});

但是通过在每个按钮上单击两次就会出错

Answer 1

不知怎的,我为我的需要创造了一个例子.我用这个代码:

$('.btn').popover();

$('.btn').on('click', function (e) {
    $('.btn').not(this).popover('hide');
});

在这里查看演示

并纠正了以前的演示, 我希望它能帮助别人

Answer 2

我之前看到的答案都没有动态的弹出窗口,所以这就是我提出来的.正如一些人所指出的那样,如果弹出窗口没有从DOM中删除,则会出现问题.remove().我从bootstrap网站上分了一个例子,创造了这个新的小提琴.使用该selector: '[rel=popover]'选项添加动态弹出框.当即将显示一个弹出窗口时,我在所有其他弹出窗口上调用destroy,然后.popover从页面中删除内容.

$('body').popover({
                selector: '[rel=popover]',
                trigger: "click"
            }).on("show.bs.popover", function(e){
                // hide all other popovers
                $("[rel=popover]").not(e.target).popover("destroy");
                $(".popover").remove();                    
            });

Answer 3

最简单的方法是trigger="focus"在你的popover中设置

点击下一次点击

使用焦点触发器可以在用户下次单击时关闭弹出窗口.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

注意 - 这意味着弹出窗口会在您单击它时立即隐藏

Answer 4

这是一个快速的通用解决方案,我正在使用,您不需要事先知道类的弹出窗口.我没有广泛地测试它.此外,我正在使用以下切换,因为我有一些问题,隐藏行为与切换完全不同.

  var $currentPopover = null;
  $(document).on('shown.bs.popover', function (ev) {
    var $target = $(ev.target);
    if ($currentPopover && ($currentPopover.get(0) != $target.get(0))) {
      $currentPopover.popover('toggle');
    }
    $currentPopover = $target;
  });

  $(document).on('hidden.bs.popover', function (ev) {
    var $target = $(ev.target);
    if ($currentPopover && ($currentPopover.get(0) == $target.get(0))) {
      $currentPopover = null;
    }
  });

Answer 5

使用Bootstrap 3.3.7，我找到了以下解决方案：

var _popoverLink = $('[data-toggle="popover"]');

_popoverLink.on('click', function(){
  _popoverLink.popover('destroy').popover({container: 'body'});
  $(this).popover('show');
});

问候。

Answer 6

这是执行此操作的最简单且优雅的方法：

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