$('#popoverlink').popover();
$("#popoverhide").click(function() {
$("#popoverlink").popover("hide");
});
#popoverlink {
position: absolute;
top: 100px;
left: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" id="popoverlink" class="btn" rel="popover" title="Some title">Popover</a>
<a href="#" id="popoverhide" class="btn" rel="popover" title="Some title">hide</a>
与fiddle http://jsfiddle.net/npq3A/98/。抱歉,之前的链接有误。这一点是正确的。
隐藏显示的弹出窗口后,我需要单击弹出窗口触发器两次才能再次显示它。
这是一个错误吗?有什么可以避免这种情况吗?
UPDATE我的意思是我使用另一个按钮来隐藏弹出窗口
$("#popoverTrigger").popover("hide");
我需要单击“#popoverTrigger”两次才能显示它。
愚蠢的解决方案
$("popoverhide").click(function() {
var f = false;
if($("popoverlink").next('div.popover:visible')) {
f = true;
$("popoverlink").popover("hide");
}
if(f) {
$("popoverlink").click();
}
})
还有其他好主意吗?
在 3.3.6 中仍然没有修复,但我在这里找到了一个建议的解决方案:
https://github.com/twbs/bootstrap/issues/16732 https://github.com/twbs/bootstrap/issues/16732
https://github.com/twbs/bootstrap/pull/17702/files#diff-f3e99e0bb007ace7a370f0492b9cb5abR340 https://github.com/twbs/bootstrap/pull/17702/files#diff-f3e99e0bb007ace7a370f0492b9cb5abR340
我已将其应用到隐藏事件中:
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
这对我有用。为了与提议的修复完全相同,它将是:
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState = { click: false, hover: false, focus: false }
});
注意:我使用委托弹出窗口,这就是我使用 $('body') 引用的原因。
For 引导程序4 use _activeTrigger
代替inState
:
$(e.target).data("bs.popover")._activeTrigger.click = false
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)