做了个消息提示框,在dropdown-menu下的每个item点击弹出Popover框,页面代码如下:
<li class="dropdown" id="header-tasks">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-tasks"></i>
<span class="badge" id="tasknum">0</span>
</a>
<ul class="dropdown-menu tasks" >
<li class="taskli" data-stopPropagation="true">
<a href="#" targetuuid="sf">
<span class="header clearfix">
<span class="pull-left">111</span>
<span class="pull-right">11</span>
</span>
</a>
</li>
<li class="footer">
<span id="tasknumtext" class="pull-left"><i class="fa fa-check"></i> 0 tasks</span>
<span class="pull-right"><a href="#">See all tasks <i class="fa fa-arrow-circle-right"></i></a></span>
</li>
</ul>
</li>
原js如下:
$("li.taskli").on('click','a',function(e){
var uuid = $(this).attr('targetuuid');
var taskhtml = '<div id="taskview">' + popheadDivHtml()+'</div>';
$(this).popover({
placement:'bottom',
title:uuid,
html:'true',
content:taskhtml
});
getResultFromFile(uuid)
}
})
在点击时,发现popover的点击事件与a标签的点击事件冲突,popover需要点击两下才可以弹出
这里就算是在$(this).popover后面加上.popover('show') 或者.popover('toggle')都会有显示问题,于是,只能从判断popover的显示入手,解决这个问题,代码如下:
$("li.taskli").on('click','a',function(e){
if ($(this).parent().find('div.popover').size()>0)
{
$(this).popover('destroy')
}else{
var uuid = $(this).attr('targetuuid');
var taskhtml = '<div id="taskview">' + popheadDivHtml()+'</div>';
$(this).popover({
placement:'bottom',
title:uuid,
html:'true',
content:taskhtml
}).popover('show');
getResultFromFile(uuid)
}
})
效果图如下: