我有一些引导弹出按钮:
<div class="bs-example tooltip-demo">
<div class="bs-example-tooltips">
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Popover on top</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Popover on bottom</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Popover on right</button>
</div>
</div>
<br><br>
<button id="toggle" class="btn btn-default" >Toggle all</button>
下面是脚本:
$('[data-toggle="popover"]').popover();
$('#toggle').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('toggle');
}
});
});
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
所以我想实现的是:
全部切换
全部切换弹出在我的代码中,它不起作用,也许与隐藏和切换有冲突?
下面是小提琴:https://jsfidle.net/c5gbu/1421/
假设您只想通过最后一个按钮来切换页面上的所有弹出窗口,那么您需要做的就是:
$('#toggle').on('click', function() {
$('[data-toggle="popover"]').popover('toggle');
});
此外,如果您单击任何不是弹出窗口的内容或切换弹出窗口的按钮,则此代码将隐藏所有弹出窗口:
$('html').on('mouseup', function(e) {
if(typeof $(e.target).data('toggle') === "undefined"
&& $(e.target).attr('id') != 'toggle') {
$('[data-toggle="popover"]').popover('hide');
}
});
您的小提琴已更新:https://jsfidle.net/c5gbu/1426/