Question

我正在使用twitter bootstrap框架，我正在试图弄清楚如何为我的popover提供手风琴后备，我想在悬停时显示弹出窗口，但是当手风琴状态设置为“显示”时，我希望它被销毁（或隐藏）。
当手风琴状态设置为“隐藏”时，我希望在悬停时再次显示弹出窗口。

我的HTML代码：

<div class="row">
<div class="span4 offset4 text-center accordion" id="#accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a href="#collapseOne" class="accordion-toggle btn" id="pop-prize" data-toggle="collapse" data-parent="#accordion2" data-placement="bottom" title="Fantabulous title">
                                    PUSH ME
                                </a> 
        </div>
        <div id="collapseOne" class="accordion-body collapse evo-text-justify">Some lorem ipsum here.. Lorem.
            <br>Other ipsum text as well.</div>
    </div>
</div>

脚本部分：

var contenuto = "Some lorem ipsum here.. Lorem.<br> Other ipsum text as well.";

$('#pop-prize').popover({
    html: true,
    title: "Fantabulous title",
    content: contenuto,
    trigger: 'manual'
}).hover(function (e) {
    jQuery(this).popover('toggle');
});
$('#accordion2').on('shown', function (e) {
   //popover hide here
    jQuery('#pop-prize').popover('hide');
});
$('#accordion2').on('hidden', function (e) {
   //popover back to be shown on hover
   jQuery('#pop-prize').popover('show');
});

jsfiddle
谢谢

Answer 1

首先，触发show和hidden事件的元素是可折叠的元素，而不是其容器。因此，切换 popover 可见性的正确选择器为#collapseOne，如下所示：

$('#collapseOne').on('show', function (e) {
    jQuery('#pop-prize').popover('hide');
});
$('#collapseOne').on('hidden', function (e) {
   jQuery('#pop-prize').popover('show');
});

您还需要一种方法来阻止 popover 在手风琴展开时显示。您可以通过以下方式将show和hide操作调整为#collapseOne状态来实现此目的：

$('#pop-prize').on('mouseenter', function (e) {
    if ($('#collapseOne').not('.in').length)
        jQuery(this).popover('show');
});
$('#pop-prize').on('mouseleave', function (e) {
    if ($('#collapseOne').not('.in').length)
        jQuery(this).popover('hide');
});

这里有一个完整的jsfiddle。

twitter bootstrap popover和accordion

1 个答案: