Seb*_*ldt 9 jquery popover twitter-bootstrap
我目前正在进行项目,当我悬停元素时我必须弹出一些东西,并且在释放元素之后它应该隐藏一段时间后,但是如果我悬停弹出窗口本身定时器应该停止并且弹出窗口不应该隐藏.
所以我尝试了一个简单的计时器,它在释放触发弹出窗口的元素后被激活,当我悬停弹出窗口时计时器停止.但是这样做时会出现一些问题.我有很多元素悬停,当我在短时间内将它们全部悬停时,计时器被覆盖,没有任何工作应该如此.
所以我为我悬停的每个元素实现了一个特定的计时器.我将我的元素的id分配给我的popover中的数据属性,所以我知道哪个popover属于哪个元素.当我悬停元素时,将显示popover.当我释放元素时,计时器启动并且timer-id被分配到我的悬停元素中的data-attr.当我现在悬停我的popover时,我从我的popover中得到相应的elemnt-id,它获得了相应的计时器ID,然后我清除了这个特定的计时器.但它不起作用,当悬停和释放其中一个元素慢慢一切似乎工作,但如果在我可以悬停的元素之间更快一些问题发生.弹出有时只是在几秒钟后随机隐藏.我找不到我做错了什么?如果有人知道如何做得更好,那将是很棒的.码:
$(".timelineTour")
.popover({
offset: 10,
trigger: 'manual',
animate: false,
html: true,
placement: 'right',
template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); }); console.log(\'mouseover popover\');"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(){
$('.timelineTour').not($(this)).popover('hide');
$(this).popover('show');
}).mouseleave(function(){
var current = this;
var t = window.setTimeout(function(){
$(current).popover('hide');},1000);
$(current).attr("data-timer",t);
});
$(".popover").live("mouseenter",function () {
var k = $(this).find('.popoverContent').attr("data-tour-id");
var z = $('#'+k).attr("data-timer");
window.clearTimeout(z);
});
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
12506 次 |
最近记录: |