69

我有几个按钮，每个按钮都需要一个弹出框。
我想要这样：
当我的用户点击其中一个时，我希望其他人被隐藏。所以只显示一个弹出框
检查并帮助我纠正这个例子： 

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

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

4

13 回答 13

160

不知何故，我为我的需要创建了一个示例。我使用了这段代码：

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

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

在这里查看演示

并更正了之前的演示 ，希望对其他人有所帮助

于 2013-04-22T20:41:18.910 回答
29

我以前看到的答案都没有动态弹出框，所以这就是我想出的。正如一些人所指出的，如果不使用.remove(). 我从 bootstrap 网站上创建了一个示例并创建了这个新的 fiddle。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();                    
            });
于 2014-08-11T21:15:38.510 回答
25

最简单的方法是 trigger="focus"在你的弹出窗口中设置

下次点击关闭

使用焦点触发器在用户下次单击时关闭弹出框。

<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>

注意- 这意味着弹出框将在您单击它后立即隐藏

于 2015-05-25T12:30:23.700 回答
10

这是我正在使用的快速通用解决方案，您不需要提前知道弹出框的类是什么。我还没有对它进行过广泛的测试。我也在下面使用切换，因为隐藏的行为与切换完全不同。

  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;
    }
  });
于 2014-06-18T15:41:00.637 回答
5

使用 Bootstrap 3.3.7 我找到了这个解决方案：

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

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

问候。

于 2016-08-30T22:21:07.750 回答
4

这是一个对我有用的解决方案。在我的脚本中，我不通过 HTML 中的 data 属性传递 var，我更喜欢我的 js 文件中的逻辑。 

            $(".vote").popover({
                trigger: " click",
                title: "Attention",
                content: "You must be a member of the site to vote on answers.",
                placement: 'right'
            });

            $('.vote').on('click', function (e) {
                $('.vote').not(this).popover('hide');
            });
于 2017-03-19T05:19:38.183 回答
4

您对此太认真了，只需在触发打开新弹出框之前关闭每个打开的弹出框：

// Hide any active popover first
            $(".popover").each(function () {
                var $this = $(this);
                $this.popover('hide');
            });

//Now Execute your new popover
$('.btn').popover({
                html: true,
                content: mycontent,
                trigger: 'manual'
            }).click(function (e) {
                $(this).popover('toggle');
                e.stopPropagation();
            });
于 2016-02-23T00:49:39.590 回答
4

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

    $('[data-toggle="popover"]').on('click', function(){
        $('[data-toggle="popover"]').not(this).popover('hide');
    });
于 2018-08-19T13:18:14.093 回答
2

在“losmescaleros”答案的帮助下，这对我来说非常有效：

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

没有任何双击问题。

于 2018-06-28T15:03:44.337 回答
0

我在使用 bootstrap v3 发布的任何答案来解决这个问题时遇到了一些困难。经过一番搜索，我发现我的主要问题是没有设置正确的弹出框触发器。它应该设置为操作问题中列出的“手动”。

下一步非常简单，并且提供了比我在其他答案中看到的解决方案更好的行为，所以我想我会分享。

$('html').on('click', function(e) {
  if($(e.target).hasClass('btn')) {
    $(e.target).popover('toggle');
  }

  if(!$(e.target).parent().hasClass('popover')) {
    $('.popover').prev('.btn').not(e.target).popover('toggle');
  }
});

此解决方案使您能够在单击页面上的任何其他位置（包括另一个弹出框链接）时关闭弹出框，但允许您单击弹出框本身而不关闭它，以便用户可以访问弹出框以进行复制粘贴文本等操作。

希望这对某人有所帮助，这是一个工作小提琴。 https://jsfiddle.net/hL0pvaty/

ps - 在我的示例中，我只使用 .btn 类作为选择器，因为它用于操作的问题。我建议使用不那么通用的东西。

于 2015-11-05T22:23:26.140 回答
0 
<ul>
<li><i class="fa fa-trash-o DeleteRow" id=""></i>1</li>
<li><i class="fa fa-trash-o DeleteRow" id=""></i>2</li>
<li><i class="fa fa-trash-o DeleteRow" id=""></i>3</li>
</ul>

// Close other popover when click on Delete/Open new popover - START //
     $('.DeleteRow').on('click', function (e) {
        $('.popover').not(this).popover('hide');
     });
 // Close other popover when click on Delete/Open new popover - END//
于 2017-07-25T14:15:27.630 回答
0

当单击图标并打开相应的弹出框时，它会具有一个以“弹出框 *”开头的值，称为 aria- describeby。

所以你找到这个图标并触发点击它们，但不是现在点击的图标。

$('.icon-info').click(function(){
    $(".icon-info[aria-describedby*='popover']").not(this).trigger('click');
});
于 2018-10-08T20:04:15.650 回答
0

我选择了我在这个线程和其他线程上看到的方法的组合。我的要求规定：

  • 一次只能看到一个弹出框
  • 单击弹出框外的任意位置应关闭弹出框
  • 弹出框应包含一个控件

  • 不需要重新绑定 popover 事件

        function bindEvents() {

         setupPopupBinding();

         setupPopupDismissal();
    };

    function setupPopupBinding() {
           $('.addSectionItem').popover({
                  html: true,
                  content: function () {
                        return createDropdowns($(this).data('sectionid'))[0].outerHTML;
                  },
                  placement: "right",
                  trigger: "click focus"
           }).on("inserted.bs.popover", function (e) {
                //initialize dropdown
                setupSelect2();
           }).on("hide.bs.popover", function (e) {
                 $('.select2-container--open').remove();
           });
    }

    function setupPopupDismissal() {
           $('body:not(.addSectionItem)').on('click', function (e) {
           $('.addSectionItem').each(function () {
           //the 'is' for buttons that trigger popups
           //the 'has' for icons within a button that triggers a popup
           if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
           $(this).popover('hide');
           $('.popover').has(e.target).remove();
        }
    });
    });
    }

    function createDropdowns(sectionId: number) {
           var dropdown = $('<div/>')
           .attr('Id', 'sectionPopupWrapper' + sectionId)
           .addClass('popupWrapper')
           .append($('<select/>').addClass('sectionPopup'))
           .append($('<button/>').addClass('btn btn-primary btn-xs')
           .attr('data-sectionid', sectionId)
           .text('Add'));

    return dropdown;
    }
于 2016-06-15T18:50:18.127 回答