在下面的代码片段中,我有一个Bootstrap Popover,它支持Hover和Click模式 . 单击时,窗口保持打开状态,应关闭(1)自我点击(再次链接),或(2)任何外部点击 .
问题:外部点击后,弹出窗口进入“ currently open ”模式 . 这意味着如果再次将鼠标悬停在窗口上,则窗口会卡住并且不会消失 . 应该发生的是,在外部点击后,当您再次将鼠标悬停在其上时,您将恢复为原始的悬停和消失模式 . 这里的行为与在内部关闭点击(原始状态)之后悬停时相同 . 我忘记了什么吗?
$('#linkPopover').popover({
trigger: 'hover click',
content: 'This is my content',
title: 'TITLE'
});
// -----------------
// Just with the above (and no other code), the Hover and Click-Toggle
// works within the SAME Popover window,
// but now I need to also remove the visible Popover on ANY CLICK OUTSIDE.
// However, although the below works, *after* clicking outside the Popover is in the CLICKED
// mode i.e. it doesn't hover anymore
$('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) {
// From outside click with the popover open, need to hide
$(this).popover('hide');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a id="linkPopover" data-toggle="popover">POPOVER</a>
End of body
3 回答
此代码可能对您有所帮助 . 我更改了条件语句,以检查用户是否在popover触发器外部单击&&如果弹出窗口可见,则触发弹出窗口触发器的
click
事件 .我想这样做是因为
click
事件是单击触发器本身时发生的事件 .我的第一个答案产生
Maximum call stack size exceeded
错误,因为有超过1个弹出窗口时无限循环(请参阅我的第一个答案和注释) .要解决这个问题:每当系统要执行
trigger('click')
时,我在body click处理程序上使用.off
. 之后,我重新初始化了body click处理程序 . 见下面的示例 .我实际上通过在
body.click
中引入自定义标志参数来解决eminememinem原始答案中的无限循环(由于trigger('click')
) . 你可以这样做我们在自己重新触发的特殊情况下设置了标志 . 如果是这样,我们忽略常规逻辑 .
完整片段: