我试图在单击其他任何地方时隐藏弹出窗口，但不在弹出窗口和按钮上单击
它对于第一种情况工作正常，但之后当它隐藏时，需要两次单击才能显示。我怎样才能一键完成呢？
$('body').on('click', function(e) {
if ($(e.target).data('toggle') !== 'popover' &&
$(e.target).parents('.feedsPopup').length == 0 &&
$(e.target).parents('.popover.in').length === 0)
$('.feedsPopup').popover('hide');
});
$(document).on('show.bs.popover', '.feedsPopup', function() {
var popup = $(this);
$(popup).attr('data-content', 'coooooooool');
});
$('#myid').html('<button type="button" class="btn btn-secondary feedsPopup" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button><button type="button" class="btn btn-secondary feedsPopup" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>')
$('.feedsPopup').popover();<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<body style="border:1px solid red;">
<br>
<br>
<br>
<br>
<br>
<br>
<div id="myid"></div>
</body>而且我还试图隐藏所有其他弹出窗口并仅显示我正在执行的一个 $('.feedsPopup').popup('hide'); 然后 $(this ).popup('show'); on feedsPopup 的 click 方法 但如果我这样做，它也会隐藏当前的弹出窗口，因此不会显示弹出窗口。
最佳答案
为什么不让它变得简单并像这样触发按钮点击:
var popup = [{
id: 'button1',
open: false
}, {
id: 'button2',
open: false
}];
$('body').on('click', function(e) {
if ($(e.target).data('toggle') !== 'popover' && !$(e.target).hasClass('popover-content')) {
for (var i in popup) {
if (popup[i].open) {
popup[i].open = false;
$("#" + popup[i].id).trigger('click')
}
}
}
});
$(document).on('show.bs.popover', '.feedsPopup', function() {
for (var i in popup) {
if ($(this).attr('id') == popup[i].id) {
popup[i].open = true;
console.log(popup[i].open)
}
}
$(this).attr('data-content', 'coooooooool');
});
$('#myid').html('<button type="button" class="btn btn-secondary feedsPopup" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button><button type="button" class="btn btn-secondary feedsPopup" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on top</button>')
$('button').each(function(i) {
$(this).attr('id', popup[i].id)
})
$('.feedsPopup').popover();<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<body style="border:1px solid red;">
<br>
<br>
<br>
<br>
<br>
<br>
<div id="myid"></div>
</body>关于javascript - Bootstrap 弹出窗口不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41873741/