twitter-bootstrap 显示一个弹出框并隐藏其他弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16150163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show one popover and hide other popovers
提问by PersianMan
i have several buttons and i need a popover for each.
i want it like this:
when my user click on one of them, i want others to be hidden. so only one popover is shown
check and help me correcting this example 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');
});
my html:
我的 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>
adding something like the code bellow solved my problem somehow:
添加类似下面的代码以某种方式解决了我的问题：
$('.btn').click(function(e) {
$('.btn').popover('hide');
});
but by clicking twice on each button it goes wrong
但是在每个按钮上点击两次就会出错
回答by PersianMan
回答by losmescaleros
None of the answers I saw previously had dynamic popovers, so this is what I came up with. As some have pointed out, there are issues with popovers causing problems if they aren't removed from the DOM using .remove(). I forked an examplefrom the bootstrap website and created this new fiddle. Dynamic popovers are added using the selector: '[rel=popover]'option. When a popover is about to be shown, I call destroy on all the other popovers, then remove the .popovercontent from the page.
我之前看到的答案都没有动态弹出框，所以这就是我想出的。正如一些人指出的那样，如果不使用.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();
});
回答by Adam Hey
The easiest way to do this is to set trigger="focus"in your popover
最简单的方法是trigger="focus"在弹出窗口中设置
Dismiss on next click
Use the focus trigger to dismiss popovers on the next click that the user makes.
下次点击关闭
使用焦点触发器在用户下一次单击时关闭弹出窗口。
<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>
Note- this will mean the popover will hide as soon as you click off of it
注意- 这意味着弹出框会在您点击后立即隐藏
回答by Andrew Barrett
This is a quick generic solution that I'm using where you don't need to know what the classes are of the popovers in advance. I haven't tested it super extensively. Also I'm using toggle below as I had some problems with the hide behaving quite differently than the toggle.
这是一个快速的通用解决方案，我正在使用它，您无需提前知道弹出框的类是什么。我还没有对它进行过广泛的测试。另外，我在下面使用切换，因为我在隐藏行为与切换完全不同方面遇到了一些问题。
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;
}
});
回答by fito dac
Using Bootstrap 3.3.7 I find this solution:
使用 Bootstrap 3.3.7 我找到了这个解决方案：
var _popoverLink = $('[data-toggle="popover"]');
_popoverLink.on('click', function(){
_popoverLink.popover('destroy').popover({container: 'body'});
$(this).popover('show');
});
regards.
问候。
回答by TheRealJAG
Here's a solution that worked for me. In my scripts I don't pass vars through the data attribute in the HTML, I prefer the logic in my js files.
这是一个对我有用的解决方案。在我的脚本中，我没有通过 HTML 中的 data 属性传递变量，我更喜欢我的 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');
});
回答by user3786660
You are taking this too seriously, just close every opened popover before triggering the new one to be opened:
您太认真了，只需在触发要打开的新弹出窗口之前关闭每个打开的弹出窗口：
// 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();
});
回答by Coquito
With the help of "losmescaleros" answer, this works perfectly for me :
在“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");
});
Without any double click issues.
没有任何双击问题。
回答by Munna Khan
This is the simplest and elegant way to do this:
这是执行此操作的最简单和优雅的方法：
$('[data-toggle="popover"]').on('click', function(){
$('[data-toggle="popover"]').not(this).popover('hide');
});
回答by stathisg
When an icon is clicked and has open the corresponding popover then it has a value that begins with "popover*" called aria-describedby.
当一个图标被点击并打开相应的弹出窗口时，它会有一个以“popover*”开头的值，称为 aria-descriptionby。
So you find this icons and trigger click on them but not on the icon which is clicked now.
所以你找到这个图标并触发点击它们而不是现在点击的图标。
$('.icon-info').click(function(){
$(".icon-info[aria-describedby*='popover']").not(this).trigger('click');
});
