显示一个popover并隐藏其他popovers

我有几个button，我需要为每个button。
我想要这样的：
当我的用户点击其中一个，我希望别人被隐藏。 所以只显示一个popup窗口
检查并帮我纠正这个例子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'); }); 

但通过点击每个button两次就出错了

Answer 1

不知何故，我为我的需要创造了一个例子。 我用这个代码：

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

在这里检查演示

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

Answer 2

我以前看到的答案都没有dynamic的popup，所以这就是我想出的。 正如一些人指出的那样，如果不使用.remove()从DOM中删除，就会出现popup问题。 我从引导网站分叉了一个例子 ，并创build了这个新的小提琴 。 使用selector: '[rel=popover]'添加dynamicselector: '[rel=popover]'选项。 当即将显示popup窗口时，我会对所有其他popup窗口调用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

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

closures点击

使用焦点触发器closures用户下一次点击的popup。

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

注意 – 这意味着popup窗口一旦点击就会隐藏起来

Answer 4

这是一个快速的通用解决scheme，我使用的地方你不需要事先知道popup的类是什么。 我没有对它进行过广泛的testing。 此外，我使用下面的切换，因为我有一些隐藏行为与切换行为不同的问题。

  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

你认真对待这个问题，closures所有打开的popover，然后触发新的popover：

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

Answer 6

这是一个为我工作的解决scheme。 在我的脚本中，我不通过HTML中的数据属性的variables，我更喜欢我的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'); }); 

Answer 7

使用Bootstrap 3.3.7我find这个解决scheme：

 var _popoverLink = $('[data-toggle="popover"]'); _popoverLink.on('click', function(){ _popoverLink.popover('destroy').popover({container: 'body'}); $(this).popover('show'); }); 

问候。

Answer 8

使用bootstrap v3解决这个问题时，我遇到了一些困难。 经过一番search，我发现我的主要问题是没有设置适当的popup式触发器。 它应该被设置为在操作问题中列出的“手动”。

下一步是非常简单的，并给出比我在其他答案中看到的解决scheme更好的行为，所以我想我会分享。

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

这个解决scheme使您能够在点击页面上的其他任何地方（包括另一个popup式链接）时closurespopup窗口，但允许您单击popup窗口而不closurespopup窗口，以便popup窗口可以被用户访问，例如复制粘贴文本。

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

PS – 我只使用.btn类作为我的例子中的select器，因为它在操作的问题中使用。 我会build议使用不太通用的东西。

Answer 9

我去了这个线程和其他人看到的方法的组合。 我的要求规定：

• 一次只能看到一个popup窗口
• 在popover外面的任何地方点击都可以解除popover
• popover应该包含一个控件

• 不应该要求重新绑定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; } 

Answer 10

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